reactjs edit child state from parent - reactjs

Question

I have an app with 3 components.
The first is App.jsx
which calls the TodoList component as follows:
<TodoList items={this.state.items} loaded={this.state.loaded} />
the TodoList component renders multiple TodoListItem components
module.exports = React.createClass({
render: function(){
return (
<ul>
{this.renderList()}
</ul>
)
},
renderList: function(){
var children = [];
for(var key in this.props.items) {
if(this.props.items[key].text){
var listItem = this.props.items[key];
listItem.key = key;
children.push(
<TodoListItem item={listItem} key={key} onEdit={this.handleItemEdit} />
)
}
}
return children;
},
handleItemEdit: function(component){
console.log(component);
}
});
Then in my TodolistItem component im rendering multiple li elements
module.exports = React.createClass({
getInitialState: function(){
return {
text: this.props.item.text,
done: this.props.item.done
}
},
render: function(){
return (
<li onClick="this.props.onEdit.bind(null,this)">{this.state.text}</li>
)
},
});
When i click on the li the function handlItemEdit on the parent element function is fired, my question is how i can change the text value of the child element in it's parent's handleItemEdit function?
What im trying to do is when you click on a li open a bootstrap modal with an input field, change its text,save and pass the new props to TodoListItem

Answer 1

In TodoList component you should write getInitialState and save items from props to state, then in render pass items from state (not from props like you did) to TodoListItem component:
for(var key in this.state.items) {
if(this.state.items[key].text){
var listItem = this.state.items[key];
listItem.key = key;
children.push(
<TodoListItem item={listItem} key={key} onEdit={this.handleItemEdit} />
)
}
}
If you call setState within handleItemEdit method, render() will see the updated state and will be executed.
In this case all you need to do is change state in your handleItemEdit and this will be passed to TodolistItem where you should use props, not state in render, like this:
render: function(){
return (
<li onClick="this.props.onEdit.bind(null,this.props)">{this.props.text}</li>
)
},
Notice you are passing props onEdit, so you have to chane handleItemEdit like this:
handleItemEdit: function(itemProps){
console.log('You clicked: ' + this.props.items[itemProps.key]);
}

Answer 2

I have tested solution of your problem in ECMAScript 6 syntax. It would be very easy to use this solution in your notation too. Basicaly what you have to do is to pass this from parent to child, and then use it when you bind onClick event to parent (so you can have this in event handler function) as secound parameter you pass props of the child, where key prop will point the very cilcked element. Then it is very easy to chane parent's state, this will trigger render on parent, and cascade to render child with the new (changed by user) props.
TodoList.js
class TodoList extends Component {
render (){
return (
<ul>
{this.props.items.map(function(listItem, key) {
return (listItem.text &&
<TodoListItem item={listItem} todoList={this} key={key} onEdit={this.handleItemEdit}/>
);
})}
</ul>
)
};
handleItemEdit(itemProps){
console.log('You clicked: ' + this.props.items[itemProps.key].text);
};
}
export default TodoList;
TodoListItem.js
import React, { Component } from 'react';
class TodoListItem extends Component {
render() {
return (
<li onClick={this.props.onEdit.bind(this.props.todoList, this.props.item)}>{this.props.item.text}</li>
)
}
}
export default TodoListItem;
I have tested it and it prints the very text you have clicked in console. This means that oyu have access to this TodoListItem and you can change state of it in TodoList component.