title: React Algolia instantsearch connectSearchBox
body: <p>I am using Algolia React InstantSearch, with connectSearchBox to create a custom input. The way I am currently doing this is below: </p>
  
  <pre><code>const MySearchBox = connectSearchBox(({currentRefinement, refine}) =&gt; {
      return (
        &lt;input
          type="text"
          placeholder="Search"
          value={currentRefinement}
          onFocus={()=&gt; props.onFocus()}
          onBlur={()=&gt; props.onBlur()}
          onChange={(e) =&gt; {refine(e.target.value)}}
        /&gt;
      );
    });
  </code></pre>
  
  <p><br/><br/>
  And then the following code to instantiate: <br/><br/></p>
  
  <pre><code>&lt;InstantSearch
    onSearchStateChange={(result) =&gt; this.onSearchChange(result)}
    appId={appId}
    apiKey={apiKey}
    indexName={index}&gt;
    &lt;MySearchBox/&gt;
  &lt;/InstantSearch&gt;
  </code></pre>
  
  <p>This works perfectly. However, what I would like to do is be able to pass props to MySearchBox. So I do something like this: <br/><br /></p>
  
  <pre><code>const MySearchBox = (props) =&gt; {
    connectSearchBox(({currentRefinement, refine}) =&gt; {
      return (
        &lt;input
          type="text"
          ....
        /&gt;
      );
    })
  }
  </code></pre>
  
  <p>Or this: </p>
  
  <pre><code>const MySearchBox = React.createClass({
    render() {
      return (
        connectSearchBox(({currentRefinement, refine}) =&gt; {
          return (
            &lt;input
              type="text"
            /&gt;
          );
        })
      )
    }
  });
  </code></pre>
  
  <p>However, running this code, I get the following error: <br /></p>
  
  <blockquote>
    <p>MYSEARCHBOX(...): A VALID REACT ELEMENT (OR NULL) MUST BE RETURNED.
    YOU MAY HAVE RETURNED UNDEFINED, AN ARRAY OR SOME OTHER INVALID
    OBJECT.</p>
  </blockquote>
  
  <p>In the end, what is a way for me to pass props to MySearchBox?</p>