CODEWITHSUNDEEP
javascriptreactjsalgoliareact-instantsearch
Joshua L
Joshua L

Reputation: 23

React Algolia instantsearch connectSearchBox

I am using Algolia React InstantSearch, with connectSearchBox to create a custom input. The way I am currently doing this is below: 

const MySearchBox = connectSearchBox(({currentRefinement, refine}) => {
    return (
      <input
        type="text"
        placeholder="Search"
        value={currentRefinement}
        onFocus={()=> props.onFocus()}
        onBlur={()=> props.onBlur()}
        onChange={(e) => {refine(e.target.value)}}
      />
    );
  });



And then the following code to instantiate: 

<InstantSearch
  onSearchStateChange={(result) => this.onSearchChange(result)}
  appId={appId}
  apiKey={apiKey}
  indexName={index}>
  <MySearchBox/>
</InstantSearch>

This works perfectly. However, what I would like to do is be able to pass props to MySearchBox. So I do something like this: 

const MySearchBox = (props) => {
  connectSearchBox(({currentRefinement, refine}) => {
    return (
      <input
        type="text"
        ....
      />
    );
  })
}

Or this: 

const MySearchBox = React.createClass({
  render() {
    return (
      connectSearchBox(({currentRefinement, refine}) => {
        return (
          <input
            type="text"
          />
        );
      })
    )
  }
});

However, running this code, I get the following error:

MYSEARCHBOX(...): A VALID REACT ELEMENT (OR NULL) MUST BE RETURNED. YOU MAY HAVE RETURNED UNDEFINED, AN ARRAY OR SOME OTHER INVALID OBJECT.

In the end, what is a way for me to pass props to MySearchBox?

Upvotes: 2

Views: 3748

Answers (1)

Marie
Marie

Reputation: 366

You can simply pass props to your custom search box and retrieve them like this:

Custom SearchBox: 

const MySearchBox = connectSearchBox(({ onFocus, onBlur, currentRefinement, refine }) => {
  return (
    <input
      type="text"
      placeholder="Search"
      value={currentRefinement}
      onFocus={() => onFocus()}
      onBlur={() => onBlur()}
      onChange={e => {
        refine(e.target.value);
      }}
    />
  );
});

Usage: 

<MySearchBox onFocus={} onBlur={} />

Also, we are now forwarding the on* events passed to the <SearchBox> widget.

Upvotes: 3

Related Questions