Строчка
todo.completed = !todo.completed
выполняется при каждом клике дважды, поэтому сначала значение становится false, затем снова true, в то время как текстовая переменная прекрасно меняется. Мне немного стыдно, поскольку точно не знаю механизм работы реакта в данном случае, но выхода тут два:
1)
if (todo.id === id) return { ...todo, completed: !todo.completed }
return todo
Что в действительности более правильно, так как каждый изменяемый элемент в реакте должен менять ссылку при изменении.
2) Вычислять новый completed сразу
onChange={() => props.handleChange(props.item.id, !props.item.completed)}
и уже в функции пользоваться полученным значением
handleChange(id, newCompleted) {
this.setState(prevState => {
const updatedTodos = prevState.todos.map(todo => {
if (todo.id === id) {
todo.completed = newCompleted
}
return todo
})
return {
todos: updatedTodos
}
})
