Tengo la siguiente función handleChange en el componente de mi aplicación que se supone que alterna los elementos de tareas como completados o no completados. Como nota al margen, tengo la intención de actualizar el código para usar React Hooks en el futuro.

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" import './styles.css' 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> ) } }

La siguiente línea, tal como está actualmente, no actualiza el estado completado de la tarea pendiente.

 if (todo.id === id) { todo.completed = !todo.completed; }

Sin embargo, si lo cambio a algo como lo siguiente, ¿¡entonces se actualiza!?

 if (todo.id === id) { todo.completed = false; }

Sin embargo, quiero que cambie el estado completado, ya sea verdadero o falso, y no puedo ver por qué el ejemplo que he usado no funcionará, ya que buscar en Google el problema parece sugerir que debería hacerlo.

¿Alguien sabe por qué mi código no funciona actualmente? Cualquier ayuda es apreciada.