SysAd班mehm8128こんにちは。21Bのmehm8128です。この記事は新歓ブログリレー11日目の記事です。普段はSysAd班でフロントエンドを担当してWebアプリを作っています。アルゴリズム班で競プロもしてます。今回はReactでToDoリストを作る話の中編です。前編を読んでいない方は↓のリンクから読んでみてください。https://github.com/mehm8128/ToDoList/tree/day-2中編の最終形はこちらです(CSSで見た目を整える前)。本編リストを分ける未完→完の機能追加CSSをつける(おまけ)本編それでは続きをやっていきます。今回作る機能はこちらです。それぞれのタスクが完か未完の状態を持っている。タスクを完と未完に分けて表示する。未完のタスクを完にできる。残りの3つを作っていきましょう。リストを分けるまず、今はリストが1つだけですが完と未完の2つのリストに分けなければなりません。リストをuseStateでもう1つ作成し、ulタグを増やします。ToDoListこんな感じです。未完→完の機能追加では次に、未完リストのタスクを完リストに入れられるようにしましょう。ToDoList未完リストのliタグ内に完了ボタンと、return()の上に完了用の関数を増やしました。handleComplete(index)}>完了する</button>ボタンがクリックされたら、タスクのindexを引数にしてhandleComplete関数が実行されます。handlecomplete関数がこちらです。1)))}indexを引数に取って、1行目ではcompletedTodos(完リスト)にtodos(未完リスト)のindex番目のタスクを追加しています。2行目ではtodos(未完リスト)からindex番目の要素を取り除いたものを新しいtodosに設定しています。配列.slice()は(第一引数の数字)番目から(第二引数-1)番目の要素だけで配列を生成するものです。Array.prototype.slice()完了ボタンを押すと上の完リストにタスクが移動できます。これでひとまず基本的な機能は完成ですね。上手くいきましたか?上手くいかなかった方はコードをもう1度確認してみて下さい。CSSをつける(おまけ)最後におまけとしてCSSをつけて見た目を整えていきます。componentsディレクトリに新しくToDoList.cssというファイルを作ります。src/components/ToDoList.jsでCSSをつけたいところ(見た目を整えたいところ)にclassNameをつけていきます。普通のHTMLではclass=""でクラス名を指定しますが、ReactではClassName=""でクラス名を指定するところに注意してください。className="button">完了する</button></li>))}</ul></div>)2行目で先ほど作ったCSSファイルをimportし、return()内のいくつかのタグにclassNameをつけました。これでToDoList.cssファイルでclassNameを指定してCSSを書けば反映されます。ちなみに僕はCSS書くの苦手なので(コードを書く技術的な意味でもデザインのセンス的な意味でも)おかしいところがあるかもしれませんが自分で色々調べて工夫してみてください。pointer;}これで見た目がいい感じになります。それぞれのプロパティについての詳細は調べてみてください。※タスクは数ヶ月前のものです。2日間お疲れさまでした。