title: react: onClick - get only the clicked element, not the children
body: <p>I have a button, inside this button is a fontawesome svg.
  The listener is on the button only, not on the svg. Though, when I click on the svg, the event.target is not the button.</p>
  
  <p>But I only need the button as target.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>const icon = '&lt;svg aria-hidden="true" data-prefix="fas" data-icon="paragraph" class="svg-inline--fa fa-paragraph fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"&gt;&lt;path fill="currentColor" d="M408 32H177.531C88.948 32 16.045 103.335 16 191.918 15.956 280.321 87.607 352 176 352v104c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h32v344c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h40c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24z"&gt;&lt;/path&gt;&lt;/svg&gt;';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    handleClick(event) {
      event.stopPropagation();
      console.log(event.target);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;
            &lt;span dangerouslySetInnerHTML={{__html: icon}} /&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I wrote a little pen: <a href="https://codepen.io/DaFunkyAlex/pen/aRvVjd" rel="noreferrer">https://codepen.io/DaFunkyAlex/pen/aRvVjd</a></p>