title: How can I prevent event bubbling in nested React components on click?
body: <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>