初心者がReactで作るTodoリスト③ トグル機能編

トグル機能 - チェック状態の更新

function handleToggleTodo(id) { // todo.idをここで受け取る
    setTodos(previousTodos =>
      previousTodos.map(item =>
        item.id === id ? { ...item, isChecked: !item.isChecked } : item
      ) 
    );
  }

チェックボックスをクリックすると、
そのアイテムのid（todo.id）が引数としてhandleToggleTodoに渡されます。
現在のTodoリスト（previousTodos）をもとにmap()で1つずつループしながらidの一致を見つけます。

• item.idがクリックされたtodo.idと一致するとき、
  isCheckedの状態を反転（true ↔︎ false）させて、新しいオブジェクトを返します。

• 一致しないときはそのままitem（オブジェクト）を返します（変更なし）。

こうして更新されたTodoリストがsetTodos()で反映されて画面に表示されます。

チェック状態に応じて打ち消し線をつける

上記の通りisCheckedは、チェックボックスのON/OFFに応じてtrueかfalseになります。

• trueのときは打ち消し線のスタイル
  （textDecoration: 'line-through'）を適用します。
• falseのときは通常のスタイルのままです。

各アイテム ⬇︎

<li key={todo.id}>
  <div>
    <input
      type="checkbox"
      onChange={() => onToggleTodo(todo.id)}
      checked={todo.isChecked}
    />
    <span style={todo.isChecked ? { textDecoration: 'line-through' } : {}}>
      {todo.text}
    </span>
  </div>
  <button onClick={() => onDeleteTodo(todo.id)}>削除</button>
</li>

ソースコード（GitHub）