clicking checkbox doesn't change it

Question

I tried to use handleChange method to change the completed boolean who is responsible for checking the box but it does not change .. I can't find where it's missed up

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(id) {
        this.setState((prevState) => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
        
    }
    
    render() {
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
        
        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )    
    }
}

export default App

and this is my ToDoItem component

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

Drew Reese · Accepted Answer · 2021-02-24 07:07:57Z

1

Issue

You are mutating your state objects. When you don't return new object references React doesn't consider the value to be different and bails on rerendering with updated values.

if (todo.id === id) {
  todo.completed = !todo.completed // <-- state mutation!
}
return todo // <-- same todo object reference

Solution

You need to also shallow copy any nested state you are updating.

handleChange(id) {
  this.setState((prevState) => ({
    todos: prevState.todos.map(todo => todo.id === id ? {
      ...todo, // <-- shallow copy todo
      completed: !todo.completed, // <-- update completed property
    } : todo)
  });
}

answered Feb 24, 2021 at 7:07

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

clicking checkbox doesn't change it

1 Answer 1

Issue

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related