React: Child communication in TodoList example - reactjs

Question

I'm learning React and modifying one of the tutorials. It's a Todo list, and I've come to a roadblock. I am trying to add the ability to delete items of the list. So I added an "x" to the end of each TodoList. But how can the child modify the parent's state.items? What is the "React" way of solving this?
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText, index) {
return <li key={index + itemText}>{itemText} <a onClick={function() { // modify the parent item variable somehow?; }}>x</a></li>
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.render(<TodoApp />, mountNode);

Answer 1

If you want to modify a parent's state from its child, you will need to create a function in your parent component that modifies the state in the way you want, then pass it to the child as a prop. Then, the child can just call this.props.functionName(args), and it will fire the function you created on the parent.
To follow your list example, let's say we have a List component that looks like this:
var List = React.createClass({
getInitialState : function () {
return ({items : []});
},
removeItem : function (num) {
var items = this.state.items;
items.splice(num, 1);
this.setState({items : items});
},
addItem : function () {
var value = React.findDOMNode(this.refs.itemName).value;
var items = this.state.items;
items.push(value);
this.setState({items : items});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return <Item name={item} key={i} num={i} remove={this.removeItem} />
}.bind(this));
return (
<div>
List:<br/>
{items}
<br/>
<input type='text' ref='itemName'/>
<button onClick={this.addItem}>Add Item</button>
</div>
);
}
});
...and an Item component that looks like this:
var Item = React.createClass({
render : function () {
return (
<div>
{this.props.name}
<button onClick={this.props.remove.bind(null, this.props.num)}>Remove</button>
</div>
);
}
});
All this List does is hold on to the Items and provide an interface for which users can add and remove Items. Adding an Item is easy, we just need a button that, when clicked, takes the value of an <input> and adds it to our List's state. React will see the state transition and re-render the List for us, which will display the new Item.
Unlike adding an Item to the end of a list, the remove function needs to be a bit more specific regarding which Item needs to be removed. For that reason, we need a button on each Item that, when clicked, will remove the item from the list by calling this.props.remove and binding its num prop to the arguments. This will cause the removeItem function on List to fire, which will remove that item from our state. Again, React will see the state transition, and re-render our List for us, with the removed Item omitted.
Here is what that code looks like in action: https://jsfiddle.net/rxnpr9sq/
Hope that helps! Let me know if you have any additional questions.

Answer 2

I think this is what you need :https://facebook.github.io/react/tips/expose-component-functions.html
Michael Parker took the time to write your specific implementation this way.