title: How to click on a ReactJS wrapping element?
body: <p>When I click a wrapping element, I'd expect a function to trigger on that wrapping element. Instead it seems to trigger on the most-inner element.</p>
  
  <p>In the case below, clicking on "yo" logs <code>undefined</code>; clicking on the space between "yo" and "lip" logs <code>1</code>; and clicking on "lip" logs <code>undefined</code>.</p>
  
  <p>I would expect all 3 to log <code>1</code>.</p>
  
  <pre><code>import React from 'react';
  
  export default class Foo extends React.Component {
    something = e =&gt; {
      e.stopPropagation()
      console.log(e.target.dataset.index)
    }
  
    render() {
      return (
        &lt;section data-index={1} onClick={this.something} ref={e =&gt; { this.section = e }}&gt;
          &lt;h1 style={{ marginBottom: 30 }}&gt;yo&lt;/h1&gt;
          &lt;p&gt;lip&lt;/p&gt;
        &lt;/section&gt;
      )
    }
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/4jlorzk774" rel="nofollow noreferrer">CodeSandbox Demo</a></p>