title: Select all checkboxes / rows - React hooks app
body: <p>I'm struggling with checking off all checkboxes at once within a table.
  I can check of individual checkboxes, however I also want the option to check off
  one &quot;master checkbox&quot;, which checks all the other ones off.</p>
  <p>I've created a simplyfied version of my React component:
  <a href="https://codesandbox.io/s/lively-wildflower-fknn9" rel="nofollow noreferrer">https://codesandbox.io/s/lively-wildflower-fknn9</a></p>
  <p>There are two things with this I'm struggling with.</p>
  <ol>
  <li><p>If we remove the checked attribute on each of the two checkboxes, we can manually check each one and get it printed out to console. If we override the checked parameter by setting it to <code>checked={checkAll}</code> we can click the All checkbox, and both checkbox 1 and two gets checked off. However, it does not invoke the <code>onChange</code> attribute of the checkbox, which means I'm not able to record the checks.</p>
  </li>
  <li><p>If I put on the <code>checked={checkAll}</code> attribute, I'm basically overriding the checkbox, which means the checkbox icon itself won't change from checked to unchecked. The <code>onChange</code> attribute is however invoked, and I'm able to record the change to the console.</p>
  </li>
  </ol>
  <p>I would like to check both checkboxes individually, and also use the &quot;master checkbox&quot; to check off both checkboxes, and invoke their <code>onChange</code> at the same time.</p>
  <p>How can I go about doing this?
  Any suggestions would be super helpful</p>