The idiomatic way to do this is to pass a callback down to TodoList:
Live demo: http://jsbin.com/zeqizene/1/edit
I've changed TodoList to look like this:
var TodoList = React.createClass({
handleDoneToggle: function(i) {
this.props.onDoneToggle(i);
},
render: function() {
var createItem = function(item, i) {
return <li onClick={this.handleDoneToggle.bind(null, i)}>
{item.text}
{item.done && " (done)"}
</li>;
};
return <ul>{this.props.items.map(createItem, this)}</ul>;
}
});
When an item is clicked, TodoList will call its own onDoneToggle
function, so TodoApp
can modify the state appropriately.