title: ReactJS modify parent state from child component
body: <p>I'm trying to remove an item from my state array when clicked. At the moment I have an onclick listener which calls a function passed into the props. However I get a warning: bind(): React component methods may only be bound to the component instance. See App... and it does not remove the item.</p>
  
  <p>Thanks for any help regarding this issue! It has pretty much ground my progress to a halt.</p>
  
  <pre><code>(function (React) {
  
  var data = [
      'Go to work',
      'Play Albion Online',
      'Keep learning React'
  ]
  
  var App = React.createClass({
      getInitialState: function () {
          return {data: []}
      },
      componentWillMount: function () {
          this.state.data = data;
      },
      removeItem: function (i) {
          console.log(i);
      },
      render: function () {
          return (
          &lt;ToDoList onRemoveItem={this.removeItem} tasks={this.state.data} /&gt;
          )
      }
  });
  
  var ToDoList = React.createClass({
      render: function () {
  
          var scope = this;
  
          var tasks = this.props.tasks.map(function (task, i) {
              return &lt;ToDo onClick={scope.props.onRemoveItem.bind(this, i)} key={task} task={task} /&gt;
          });
  
          return (
          &lt;ul&gt;
              {tasks}
          &lt;/ul&gt;
          )
      }
  });
  
  var ToDo = React.createClass({
      render: function () {
          return (
              &lt;li&gt;{this.props.task}&lt;/li&gt;
          )
      }
  });
  
  React.render(&lt;App /&gt;, document.getElementById('example'));
  })(React);
  </code></pre>