ReactiveSearch components and passing state/props

Question

I have a ReactiveList component that lives in my SearchContainer. All it does is display search results based on user query. The ReactiveList component works, it automatically displays the contents of my ES index (hosted at Appbaseio). It DOES NOT display results based on user submitted query.

In my global Navbar I have a DataSearch component (conditionally rendered based on route) that provides autocomplete. I also have a pretty much identical DataSearch component in my homepage at ('/').

I'm trying to figure out how to pass the query from DataSearch to ReactiveList so that the results displayed are actually based on a user submitted query?

So let me reiterate, I'm trying to figure out how to get DataSearch and ReactiveList to talk to each other.

In my DataSearch component, I have

<DataSearch
    componentId="q"
    URLParams={true}
    onValueSelected={(value, cause, source) => {
      if (cause !== 'SUGGESTION_SELECT') {
        <Redirect to={{
        pathname: '/search',
        search: `?q=${value}`
        }}/>;            
       } else {
         this.valueSelected = true;
       }
     }}
     ...
     />

In my ReactiveList component I have:

<ReactiveList
  componentId="q"
  URLParams={true}
  onNoResults="Sorry, no results were found, try searching again."
  react={{ or: ["q"] }}
  onData={(res) => { ... }}
  ...
  />

From what I understand, as long as I have URLParams={true} in DataSearch and componentId='q' in both DataSearch and ReactiveList - search should work. Autocomplete seems to be functional but ReactiveList is NOT displaying results based on user query.

Do I need to add another property to DataSearch or ...? Where am I going wrong.

score 0 · Answer 1 · answered Nov 06 '18 at 15:09

Different components should not have the same ID. Set the componentId for your ReactiveList to something unique (and choose a different unique ID for your DataSearch). Not sure if there is another problem in the setup but this is something you can fix right away.

ReactiveSearch components and passing state/props

1 Answers1