React State Bind From Child To Parent Element

I am new to reactJS I have an JSON array which consists of task. I have rendered the the array to 2 ul list. One has completed tasks and the other has uncompleted tasks. If i click

Solution 1:

This is happening because the parent component, TodoApp which renders the two lists does not know that something has changed in one of the them. For this the child component should notify the parent component about it.

Add a onStatusUpdate attribute to TodoList like this

<TodoList items={this.state.items} completed={false} onStatusUpdate={this.update}/>

This is how the update method can be defined

update: function(items){
  this.setState({items: items});
}

In the click handler of child component do something like this

clickHandle: function(index {
  this.props.items[index].completed=!this.props.items[index].completed;
  this.props.onStatusUpdate(this.props.items); // <-- this triggers the onStatusUpdate attribute defined in TodoList component
},

Here is an updated demo https://jsfiddle.net/dhirajbodicherla/aqqcg1sa/2/`