title: How do you implement "check all" in React with child components?
body: <p>I've found a couple questions on here that sort of answer the question,</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/27555667/how-does-one-select-all-child-components-not-dom-elements-used-in-a-reactjs-co">select all</a></li>
  <li><a href="https://stackoverflow.com/questions/21581688/react-facebook-managed-state-of-controlled-checkboxes">managed state of controlled checkboxes</a></li>
  </ul>
  
  <p>but they do not allow me to render a component with a checkbox. </p>
  
  <p>What I'd like is something like this,</p>
  
  <pre><code>render: function () {
      var rows = [&lt;ChildElement key={1} /&gt;, &lt;ChildElement key={2} /&gt;];
      return (
      &lt;ParentElement&gt;{rows}&lt;/ParentElement&gt;
      );
  }
  </code></pre>
  
  <p>where my ChildElements each have their own check boxes that can be set to <code>checked=true</code> or <code>checked=false</code> whenever a global checkbox is checked or unchecked on the ParentElement.</p>
  
  <p>Any suggestions? Cheers</p>