ReactのStateは置き換える

ReactのStateは書き換えるのではなく置き換えるようにする。

  const [item, setItem] = useState({})

  // NG
  item.name = 'John'

  // OK
  setItem({
  ...item,
  name: 'John'
});

ReactでTodo Appを作っていて、タスク完了の値をtoggleしたかったのですが
stateを書き換えようとしていてうまくいかずハマったのでメモしておきます。

  const initialTodos = []
  const [todoItems, setTodoItems] = useState(initialTodos)

  function addTodoItem(newTodoItem) {
    setTodoItems([...todoItems, newTodoItem])
  }

  function completeTodoItem(targetTodoId) {
    const localTodos = [...todoItems]
    localTodos.forEach((todo) => {
      if (todo.id === targetTodoId) {
        todo.isCompleted = !todo.isCompleted
      }
    })
    setTodoItems(localTodos)
  }

nextjs-todo-app

demo