カテゴリタブで絞り込め

中段 / 目安 25分

並んだメニューを見ながら、陽葵さんが最後の注文を出します。「『ドリンクだけ』のタブ、React 版でも！ JS 版よりきっと綺麗に書けるんでしょ?」。

JS 道場でも同じものを作りました。あのときは、タブが押されるたびに一覧を空にして、条件に合うものだけを作り直して詰め込む、という手順を書きました。React ではその手順を書きません。持つのは「いま何を選んでいるか」だけ です。

state は1つで足ります。const [category, setCategory] = useState("すべて"); のように、選ばれているカテゴリ名だけを持たせてください。画面を描くときに menus を filter に掛けて、選ばれているカテゴリに合うものだけを残し、その結果を map で並べます。タブを押したときにやることは、state を書きかえることだけです。一覧をどうするかは、次に描かれるときに自然に決まります。

「すべて」の扱いだけ決めておく必要があります。filter の条件を「選ばれているのが『すべて』なら全部残す、それ以外なら category が一致するものだけ残す」と書けば、タブを1種類の仕組みで扱えます。

初期コードには categories 配列とタブのボタンがすでに並んでいて、menus の各件は category を持っています。足りないのは state と、絞り込みと、タブの onClick です。

完成条件

• 選ばれているカテゴリを useState("すべて") で持つ
• 最初は「すべて」が選ばれていて、全4件のカードが並ぶ
• className="tab" のタブを押すと、そのカテゴリのカードだけが並ぶ
• 「すべて」を押すと全件に戻る

進め方

filter は条件が真になった要素だけを集めた新しい配列を返します。元の配列は変わりません。filter してから map する、と2段でつなげて書けます。

タブのボタンには、押されたカテゴリ名を state に入れる処理を付けます。map でタブを並べているので、押されたときにどのカテゴリだったかは、その繰り返しの中の変数がそのまま使えます。

絞り込みが効かないときは、比較している値を確かめてください。データ側が持っているのはカテゴリ名の文字列で、タブが持っているのも同じ文字列です。どちらかに余計な空白や違う表記が混ざると、一致しません。

師範の言葉です。「JS 版は“消して描き直す”手続きだった。React 版は“状態が変われば絞られる”。並べて見よ」。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。