title: Passing parameter in ReactJS onclick
body: <p>I have this React component that has items generated from a list (with a map function). Each of those elements has a button. I want this button's onclick button to pass in a parameter to identify which list item's button was clicked. </p>
  
  <p>It looks something like this.</p>
  
  <pre><code>var Component = React.createClass({
      assignItem: function(item){
          this.setState({item:item})
      },
      render: function(){
          var listItems = list.map(function(item){
          return &lt;div&gt;{item}
          &lt;button onClick={this.assignItem(item)&gt;Click&lt;/button&gt;
          &lt;/div&gt;
          })
          return &lt;div&gt;{listItems}&lt;/div&gt;
      }
  })
  </code></pre>
  
  <p>Of course that doesn't work. The error message says that this.assignItem is not a function. 
  I know the official React documentation suggests this:</p>
  
  <pre><code>var handleClick = function(i, props) {
    console.log('You clicked: ' + props.items[i]);
  }
  
  function GroceryList(props) {  
    return (
      &lt;div&gt;
    {props.items.map(function(item, i) {
      return (
        &lt;div onClick={handleClick.bind(this, i, props)} key={i}&gt;{item}&lt;/div&gt;
      );
    })}
  &lt;/div&gt;
    );
  }
  ReactDOM.render(
     &lt;GroceryList items={['Apple', 'Banana', 'Cranberry']} /&gt;, mountNode
  );
  </code></pre>
  
  <p>but that works with a function outside of the component. Since I want my function to manipulate the sate, I want to keep it within the React component. </p>
  
  <p>How do I do this?</p>