title: onClick of both child and parent triggered when child is clicked
body: <pre><code>class Sample extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleChild = this.handleChild.bind(this);
      this.handleParent = this.handleParent.bind(this);
    }
  
    render() {
      return (
        &lt;div
          style={{width: '100%', height: '500px', background: 'white'}}
          onClick={this.handleParent}&gt;
  
          &lt;div
            style={{ width: '40px', height: '40px', margin: '0 auto', background: 'black'}}
            onClick={this.handleChild}&gt;
            hello
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  
    handleParent(e) {
      console.log('parent');
    }
  
    handleChild(e) {
      console.log('child');
    }
  }
  </code></pre>
  
  <p>output when child is clicked</p>
  
  <pre><code>child
  parent
  </code></pre>
  
  <p>desire output is</p>
  
  <pre><code>child
  </code></pre>
  
  <p>I mean I just want to trigger only child's onClick when child is clicked.</p>
  
  <p>Parent is working fine. It triggers only parent's onClick when parent is clicked.
  The problem I'm having is with child.</p>