title: How can I set the parent component state based on children component checkbox value?
body: <p>I am using Material UI Table component.<br>
  In Table component, I want to store the checked prop from  in EnhancedTableHead,<br> to my parent component EventManagement.<br></p>
  <p>But I am not sure what is the correct way to do it because I need to extract the event object from , in order to get the checked prop</p>
  <p>App.js</p>
  <pre><code>export default class EventManagement extends Component {
    state = {
      // How to set the below state by refering the table checkbox
      isSelectAllCheckboxSelected: false
    };
  
    render() {
      return &lt;Table /&gt;;
    }
  }
  </code></pre>
  <p>Demo.js(Table Component)</p>
  <pre><code>function EnhancedTableHead(props) {
  ...
    return (
      &lt;TableHead&gt;
        &lt;TableRow&gt;
          &lt;TableCell padding=&quot;checkbox&quot;&gt;
            {/* How to get the checked prop below and send it to parent component */}
            &lt;Checkbox
              indeterminate={numSelected &gt; 0 &amp;&amp; numSelected &lt; rowCount}
              checked={rowCount &gt; 0 &amp;&amp; numSelected === rowCount}
              onChange={onSelectAllClick}
              inputProps={{ &quot;aria-label&quot;: &quot;select all desserts&quot; }}
            /&gt;
          &lt;/TableCell&gt;
        &lt;/TableRow&gt;
      &lt;/TableHead&gt;
  </code></pre>
  <p>In this case, since the select all checkbox is selected, state isSelectAllCheckboxSelected should be true.
  <a href="https://i.stack.imgur.com/4fL33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4fL33.png" alt="enter image description here" /></a></p>
  <p>CodeSandbox:<br>
  <a href="https://codesandbox.io/s/material-demo-forked-hf5z9?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-forked-hf5z9?file=/demo.js</a></p>