React prevent event bubbling in nested components on click : <p>Here's a basic component. Both the <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> have onClick functions. I want only the onClick on the <code>&lt;li&gt;</code> to fire, not the <code>&lt;ul&gt;</code>. How can I achieve this?</p>

<p>I've played around with e.preventDefault(), e.stopPropagation(), to no avail. </p>

<pre><code>class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      &lt;ul 
        onClick={(e) =&gt; {
          console.log('parent');
          this.handleClick();
        }}
      &gt;
        &lt;li 
          onClick={(e) =&gt; {
            console.log('child');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        &gt;
        &lt;/li&gt;       
      &lt;/ul&gt;
    )
  }
}

// =&gt; parent
// =&gt; child
</code></pre>
