title: span does not firing OnClick inside list react child component
body: <p>I have 2 components when the parent trigger by OnClick the child which has span element doesn't fire OnClick at all. I try it when the parent is button and it works perfectly but when the parent is list it doesn't trigger the child. </p>
  
  <pre><code>class Menu extends Component {
   handleItemClick=(e)=&gt;{
       // whatever ..
   }
   render(){
    return(
     &lt;ul&gt;
       {
         items.map((item, i)=&gt;(
              &lt;li key={i}
                  id={i}
                  onClick={this.handleItemClick}&gt;
                  &lt;Child /&gt;
                  {item}
              &lt;/li&gt;
          ))
       }
     &lt;/ul&gt;
    )
  }
  
  class Child extends Component {
   handleSpanClick=(e)=&gt;{
       console.log("It works!")
   }
   render(){
    return(
     &lt;span onClick={this.handleSpanClick}&gt;&lt;/span&gt;
    )
  }
  </code></pre>