title: Reactjs - Controlling Multiple Checkboxes
body: <p>Im building a CheckAllBoxes component in Reactjs. I have a list of items</p>
  
  <pre><code>fruits = {orange, apple, grape}
  </code></pre>
  
  <p>A general <code>&lt;SelectBox /&gt;</code> component to display and toggle the HTML checkbox</p>
  
  <p>I need to build a <code>&lt;Fruits /&gt;</code> component to list all the fruits and each of item has its own <code>&lt;SelectBox /&gt;</code></p>
  
  <p>Then I need to build a <code>&lt;SelectAll /&gt;</code> component which has a <code>&lt;SelectBox /&gt;</code> and when it is checked, it will toggle all the <code>&lt;CheckBox /&gt;</code> of <code>&lt;Fruits /&gt;</code></p>
  
  <p>If any fruit is unchecked again, then the <code>&lt;SelectAll /&gt;</code> should be unchecked too.</p>
  
  <p>The result should look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uL4rF.jpg" alt="enter image description here"></p>
  
  <p>How can I get the <code>&lt;SelectAll /&gt;</code> to control other checkboxes ?</p>