title: Event handling for list items in React
body: <p>In all examples and questions regarding rendering list items in React.js an event handler is registered on every list item like the following:</p>
  
  <pre><code>class MyList extends Component {
    state = {
      list: []
    };
  
   // handleItemClick implementation is hidden here ..
  
    render() {
      return (
        &lt;ul&gt;
          {this.state.list.map(item =&gt; (
            &lt;li onClick={this.handleItemClick}&gt; {item.text} &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      );
    }
  }
  </code></pre>
  
  <p>I knew from my previous experience in frontend development that it not a good practice to put the event handler for every list item, instead you should put the handler on the <code>&lt;ul&gt;</code> element and benefit from the event bubbling to know which list item triggered the event.</p>
  
  <p>My question is: Does the react community do it the wrong way?</p>