最低限の操作だけ記載
ポイントはStateの操作はsetStateでのみ行うこと
配列のStateはスプレッド構文で変数に代入→代入した変数(配列)を操作→setStateでStateに反映
-
TODOを入力
インプットボックスの中身をStateとして保持(inputState)
インプットボックスの中身が変わたびにStateを更新する -
TODOを追加
未完了のTODOの配列をStateとして保持(incompleteTodo)
追加ボタンをクリックすると
・incompleteTodoとinputStateを合わせた変数を宣言
・代入した変数を引数にとってStateを更新 -
TODOを削除
削除ボタンをクリックすると
・incompleteTodoを変数に代入
・上記配列のindex番目の要素を削除する
・削除後の配列を引数にとってStateを更新 -
TODOを完了
完了のTODOの配列をStateとして保持(completeTodo)
完了ボタンをクリックすると
・incompleteTodoを変数に代入
・上記変数のindex番目の要素を削除する
・削除後の配列を引数にとって未完了のTODOのStateを更新
・incompleteTodoのindex番目の要素とcompleteTodoを合わせた変数を宣言
・上記変数を引数にとって完了のTODOのStateを更新 -
完了したTODOを戻す
戻すボタンをクリックすると
・completeTodoを変数に代入
・上記変数のindex番目の要素を削除する
・削除後の配列を引数にとって完了のTODOのStateを更新
・completeTodoのindex番目の要素とincompleteTodoを合わせた変数を宣言
・上記変数を引数にとって未完了のTODOのStateを更新