React入門 ・ Chapter 20
ToDoアプリを作る③——仕上げ、そして修了
コード演習 ・ 冒頭を無料公開中
機能はそろいました。最終章では仕上げをひとつ足し、完成品を一緒に眺め、この先の道を示して教材を閉じます。
残りタスク数を出す——stateを増やさずに
「残り2件」という表示を足します。ここで、初心者と経験者の分かれ道になる問いをひとつ。「残り件数」用のstateは必要でしょうか?
作りたくなりますよね。const [remaining, setRemaining] = useState(0) として、追加のたびに+1、完了のたびに-1……。でも、これは悪手です。理由は、残り件数がtodosから計算で出せる値だからです。
const remaining = todos.filter((todo) => !todo.done).length;
コード演習はブラウザ上でそのまま実行できます
本文の残り、エディタ・テスト実行・解答コード・ヒントはプラン加入後に利用できます。