title: Share data between React components with no relation?
body: <p>I'm working on a React component library that allows for client-side data filtering by passing an array of objects and an <code>&lt;input/&gt;</code> as props to a <code>&lt;SearchFilter/&gt;</code> component. I want to return the filtered results to a <em>separate</em> <code>&lt;SearchResults/&gt;</code> component that can be rendered elsewhere in the tree (i.e. the results component doesn't have to be a child of the input component).</p>
  
  <p>I've got the filtering figured out, but I'm not sure the best route to take in React on getting the filtered data to the <code>&lt;SearchResults/&gt;</code> component.</p>
  
  <p>This is what I'd like to end up with...</p>
  
  <pre><code>&lt;SearchFilter
    data={data}
    input={&lt;input type="text" value={value} onChange={this.handleChange}/&gt;}
  /&gt;
  </code></pre>
  
  <p>Then, using Render Props to return the data and map over that to return JSX, there would be the results component. Something like this...</p>
  
  <pre><code>&lt;SearchResults 
    render={data =&gt; (
      data.map(el =&gt; (
        &lt;div&gt;
         &lt;span&gt;{data.someProperty}&lt;/span&gt;
        &lt;/div&gt;
      )
    )}
  /&gt;
  </code></pre>
  
  <p>This is what I'd like to achieve because I want to allow for rendering the <code>&lt;SearchFilter/&gt;</code> component at one place in the tree, and allow the <code>&lt;SearchResults/&gt;</code> component to be rendered <em>elsewhere</em>, so that there's maximum flexibility in how the tree is composed and, therefore, how the view is rendered.</p>
  
  <p>I've looked into the Context API, but it seems like that would require a handful more components to be a part of my library, which further complicates what I'm trying to achieve. If that's the only way around it, then that's fine, but I wanted to ask and see if anyone can think of another solution.</p>
  
  <p>Thanks!</p>