title: How can I set up state to allow one child component to render another
body: <p>I have a main component which has two child components and six of each.</p>
  <p>Something like this:</p>
  <pre><code>    &lt;Main&gt;
        &lt;Component1 /&gt;
        &lt;Component1 /&gt;
        &lt;Component1 /&gt;
        &lt;Component1 /&gt;
        &lt;Component1 /&gt;
        &lt;Component1 /&gt;
        &lt;Component2 /&gt;
        &lt;Component2 /&gt;
        &lt;Component2 /&gt;
        &lt;Component2 /&gt;
        &lt;Component2 /&gt;
        &lt;Component2 /&gt;
      &lt;/Main&gt;
  </code></pre>
  <p>My goal is to be able to render a specific Component2 based on a toggle from Component 1.</p>
  <p>So clicking the first Component1 would toggle the render of the first Component2</p>
  <p>I've tried something like this in my main component:</p>
  <pre><code>  const [component2Visible, setcomponent2Visible] = useState([false, true, false, false, false, false])
  </code></pre>
  <p>But I don't think this is the right direction at all.</p>