ToDoアプリを作る②——完了と削除

第1形態のToDoは、足すことしかできません。この章で「完了にする」「削除する」を足して、機能を完成させます。削除はチャプター17の型そのまま。新しい挑戦は完了の切り替え——「配列の中の、1件だけを変える」です。

削除——filterの型、再演

先に楽な方を片付けます。idで指名して、それ以外を残す。チャプター17の削除の、文字列がオブジェクトに変わっただけの形です。

const handleDelete = (id: number) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

呼び出し側も前章の型の通り、アロー関数で包んで引数を渡します。

<button onClick={() => handleDelete(todo.id)}>削除</button>

完了の切り替え——「1件だけ差し替えた新配列」を作る

さて本題です。「牛乳を買う」をタップしたら、そのdoneをtrueにしたい。もちろん直接書き換えはダメです(壊さない原則)。では、どう考えるか。

発想はこうです——「全員をチェックして、該当の1件だけ差し替えた、新しい配列」を作る。全員に同じ処理をして新配列を作る道具、持っていますよね。mapです。