title: React, Adding onClick event directly to Components instead of render element inside said component.
body: <p>First off I Know about this thread: <a href="https://stackoverflow.com/questions/28268835/react-onclick-event-on-component">React onClick event on component</a></p>
  
  <p>Is there not a way to do this directly to a React Component? That didn't seem to get answered in the thread. I know how i can add the attacked function a layer deeper but that is just extra connection code that makes it more brittle IMO. any change that it make to the ListItem level i would have to make to the interconnect. I imagine this getting much worse if am an nTh level child component trying to get back up to the master State. </p>
  
  <p><strong>My Case</strong></p>
  
  <p>Parent->List->ListItem</p>
  
  <p>I need to have a click event on a list element trigger a function on the parent. I want to be able to click a ListItem component and have that onClick event come back up to Parent and update the state to trigger a rerender of a of a sibling component to List I have cut out a lot of boilerplate.</p>
  
  <p>Parent Component wrapping it all. this is where i am using state to update my render views. </p>
  
  <pre><code>var Parent = React.createClass({
      updateState:function(newCurrent){
          this.setState({current: newCurrent});
      },
      render: function() {
          return (
              &lt;div className="Parent"  &gt;
                &lt;Current this.state.current /&gt;
                &lt;List
                  list={this.state.list} 
                  updateCurrentVideo={this.updateCurrentVideo} /&gt;
              &lt;/div&gt;
          );
      }
  }); 
  </code></pre>
  
  <p>List here is the List Element described at the start, i would like to attach an onClick event to each ListItem ti pass its data back up to parent to update state. </p>
  
  <p>Instead of attaching the event inside of the compoent and the having to pass the trigger like this. ListItem->List->Parent(). It would be nice to attach the listener while i .map through the children of List. </p>
  
  <pre><code>var List = React.createClass({
      render: function() {
          var list = this.props.list.map(function(item,index){
              return (
                  &lt;ListItem  
                      onClick={ () =&gt; this.props.updateState(item) } /&gt;
              )
          }.bind(this));
  
          return (
              &lt;div className="List"&gt;
                  {list}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>The onClick attached at the component level doesn't appear to actually do anything. However if i change it to be like this and pass a prop down to the ListItem with a callback function then it magically works. So i guess my greater question this. </p>
  
  <pre><code>var ListVideos = React.createClass({
      handleClick:function(data){
          this.props.updateCurrentVideo(data)
      },
      render: function() {
          var list = this.props.list.map(function(item,index){
              return (
                  &lt;ListItem  
                      handleClick={this.handleClick(item) } /&gt;
              )
          }.bind(this));
  
          return (
              &lt;div className="List"&gt;
                  {list}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>And then Attach the onClick to the Component wrapper in the ListItem</p>
  
  <pre><code>var ListItem = React.createClass({
      render: function() {
          return (
              &lt;div className="ListItem" onClick={this.props.handleClick}&gt; 
                  // STUFF
              &lt;/div&gt;
          );
      }
  });
  </code></pre>