title: How to pass information to nested components in react?
body: <p>Say I have</p>
  
  <pre><code>&lt;component1&gt;
       &lt;component2&gt;
             &lt;component3&gt;
                   &lt;component4&gt;
  </code></pre>
  
  <p>(where component1 has a child component2, component2  has a child component3, component3 has a child component4 )</p>
  
  <p>and say I want to pass something from component1 into component4 . Do I need to pass props down the chain? so component1 -> component2 -> component3 -> component4</p>
  
  <p>?</p>
  
  <p><strong>Please note:</strong>
  <strong>these components are not in the same file. so in component1.js I refer to <code>&lt;component2&gt;</code> and in component2.js I refer to <code>&lt;component3&gt;</code> etc.</strong></p>