title: React: Trigger method in child component from different child component
body: <p>I've created two components in React, <code>&lt;Search /&gt;</code> and <code>&lt;List /&gt;</code> that both are children of <code>&lt;App /&gt;</code>.</p>
  
  <p>When a button in <code>&lt;Search /&gt;</code> is clicked, I want to fetch something from an API and display the results in <code>&lt;List /&gt;</code>. While I got this working by doing the fetch inside <code>&lt;App /&gt;</code> and passing the response as prop to <code>&lt;List /&gt;</code>, I would prefer to encapsulate the fetch inside <code>&lt;List /&gt;</code>.</p>
  
  <p>Unfortunately I am having a hard time finding a way to do this. 'The React way' probably would be to do this via some clever prop passing, but I haven't found a neat way to do this – even a 'shouldFetch' boolean would need to be reset after the fetch which seems cumbersome and would trigger unnecessary renders.</p>
  
  <p><a href="https://stackoverflow.com/a/39741908/1144247">This answer</a> uses <code>refs</code> for something similar which might work, but actually I am a bit hesitant to try it since <code>refs</code> seem to be a bit dirty, according to the React docs, as they "imperatively modify a child outside of the typical dataflow".</p>
  
  <p>How can I instruct my <code>&lt;List /&gt;</code> component to do something after a button in <code>&lt;Search /&gt;</code> has been clicked?</p>
  
  <p>If required I can supply code – but hoping this question is simpler than it seems to me.</p>