Checkbox doesnt update on react on child even if the parent state update?

Question

This is the code from the parent:

_handleSelectedTodo(e) {
  e.preventDefault(); 
  this.setState({checkedIds: [...this.state.checkedIds, e.target.value]});
}
// render () { ...
<ul>
{todos.map((todo,todoIndex) => // The map method has default argument on second index, the index of the current todo in map execution. We use it so we do not have to use findIndex when we need to dispatch action that needs index of a specific todo
  <Todo
    key={todo.id}
    {...todo} // pass all the todo property
    onClick={() => onTodoClick(todo.id)}
    onTrashClick={() => onDeleteClick(todoIndex)}
    handleSelectedTodo = {this._handleSelectedTodo}
    checked={Boolean(this.state.checkedIds.includes(todo.id))}
  />
)}

This is what I tried since assigning props on checkbox doesn't update on the Child Todo code, checked can be true or false that will depend on props:

componentWillMount() {
  this.setState({ checked: this.props.checked })
}
// render() { ...
<input
  checked={this.state.checked}
  onChange={handleSelectedTodo}
  type="checkbox"
  value={id}
></input>

Checking on the checkbox updates the parent component state but the checkbox on child is not checked. help?

VivekN · Accepted Answer · 2017-06-05 20:13:33Z

1

This code can also be written this way:-

_handleSelectedTodo(e) {
  e.preventDefault(); 
  this.setState({checkedIds: [...this.state.checkedIds, e.target.value]});
}
render () { ...
<ul>
{todos.map((todo,todoIndex) => {
  let isChecked = (this.state.checkedIds.indexOf(todo.id) >= 0);
  return (
     <Todo
       key={todo.id}
       {...todo} // pass all the todo property
       onClick={(id) => onTodoClick(todo.id)} //This event should be binded to 'this' inside the constructor
       onTrashClick={(todoIndex) => onDeleteClick(todoIndex)}
       handleSelectedTodo = {this._handleSelectedTodo}
       checked={isChecked}
     />
  )
 });
}

This child component should depend on it's parent state for it's checked property

<input
  checked={this.props.checked}
  onChange={handleSelectedTodo}
  type="checkbox"
  value={id}
></input>

If you want to keep the checked property of child as a state of child as well, then what Mayank said about componentWillReceiveProps would be the right approach.

answered Jun 5, 2017 at 20:13

VivekN

1,60212 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gpbaculio Over a year ago

I did it inside the Todo Component, it doesnt work: checked={ Boolean(this.state.checkedIds.indexOf(todo.id) >= 0) ? true : false }

VivekN Over a year ago

Just this should work. No need for Boolean let isChecked = (this.state.checkedIds.indexOf(todo.id) >= 0);

gpbaculio Over a year ago

as much as I want to say it does, It don't :/

VivekN Over a year ago

Would you like to screen share through team viewer, I can then better debug this?

gpbaculio Over a year ago

when I click the checkboxes, the last one checked will be checked but not the latest one.

Mayank Shukla · Accepted Answer · 2017-06-06 07:39:48Z

1

Reason is, componentWillMount will get called only before the initial rendering not after that, when you are updating the state of parent component, state of child component is not getting updated.

Use componentWillReceiveProps method to update the state of child component:

componentWillReceiveProps(nextProps){
   if(nextProps.checked != this.state.checked)
        this.setState({checked: nextProps.checked})
}

Or simplest solution will be don't save the value in state of child component, directly use the props values, Like this:

<input
    checked={this.props.checked}      //here use this.props.checked directly
    onChange={handleSelectedTodo}
    type="checkbox"
    value={id}
>
</input>

componentWillReceiveProps:

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

componentWillMount:

componentWillMount() is invoked immediately before mounting occurs. It is called before render().

edited Jun 6, 2017 at 7:39

answered Jun 5, 2017 at 20:02

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

2 Comments

gpbaculio Over a year ago

it doesn't work I don't know why, but the props is changing but just doesnt get checked

Mayank Shukla Over a year ago

ohh sorry there was a typo in componentWillReceiveProps method parameter use nextProps check the updated answer, it will work :)

Collectives™ on Stack Overflow

Checkbox doesnt update on react on child even if the parent state update?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related