ReactJS modify parent state from child component

Question

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.

Thanks for any help regarding this issue! It has pretty much ground my progress to a halt.

(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 (
        <ToDoList onRemoveItem={this.removeItem} tasks={this.state.data} />
        )
    }
});

var ToDoList = React.createClass({
    render: function () {

        var scope = this;

        var tasks = this.props.tasks.map(function (task, i) {
            return <ToDo onClick={scope.props.onRemoveItem.bind(this, i)} key={task} task={task} />
        });

        return (
        <ul>
            {tasks}
        </ul>
        )
    }
});

var ToDo = React.createClass({
    render: function () {
        return (
            <li>{this.props.task}</li>
        )
    }
});

React.render(<App />, document.getElementById('example'));
})(React);

Answer 1

React actually auto-binds methods to the current component:

http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html

In the TodoList component, rather than:

scope.props.onRemoveItem.bind(this, i)

Try:

scope.props.onRemoveItem.bind(null, i)

By providing null instead of this you'll allow React to do its own thing. Also you need to actually use the onClick handler:

<li onClick={this.props.onClick}>{this.props.task}</li>