onClick of both child and parent triggered when child is clicked
<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>