title: Pass click event to nested component - React | Material-UI
body: <p>Im having an issue. When you click <code>listItem</code> (whole separated <code>li</code> element) I want to call the <code>onChange</code> function on the checkbox component inside <code>listItem</code>. </p>
  
  <p><strong>I could easily move</strong> that function from checkbox to parent but I will loose the <code>checked</code> prop.</p>
  
  <p>Checking the checkbox itself doesnt work, but just open the console to see the results. I want <code>handleToggle</code> function to fire properly when whole element is clicked (not only checkbox)</p>
  
  <pre><code>  &lt;List&gt;
      {['first', 'second', 'third'].map((name, i) =&gt; (
        &lt;ListItem key={i} dense button&gt;
          &lt;ListItemText primary={name} /&gt;
          &lt;Checkbox
            disableRipple
            checked={false}
            onChange={(evt, checked) =&gt; this.handleToggle(evt, checked, name)}
          /&gt;
        &lt;/ListItem&gt;
      ))}
    &lt;/List&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/7339ykv1r6" rel="noreferrer">Code SandBox</a></p>
  
  <h2>Edit</h2>
  
  <p>I don't want to use state in this component at all. Summarizing - how to pass event from <code>ListItem</code> (parent) to it's children (<code>Checkbox</code>)?</p>
  
  <p><strong>Final edit</strong>: I've found out the way how to deal with it. No state needed. Just two simple lines of code.</p>
  
  <p>Since checkbox state is fully controlled by redux, I just moved the <code>onClick</code> func to the <code>ListItem</code> element with one line on code in it's body:</p>
  
  <p><code>...dispatch(toggle(!this.props.elements[nameOfElement], name));</code></p>
  
  <p>Anyways thanks to everyone for help. Upvoted every answer.</p>