絞り込みUI
絞り込みは state と filter の組み合わせ
カテゴリのボタンを押すと、その種類の作品だけが残る。よくある絞り込み UI です。React では2つの部品でできています。
1つ目は state です。いま選ばれているカテゴリを覚えます。2つ目は filter です。元の配列から、選ばれたカテゴリに合う作品だけを取り出します。
JavaScript (JSX)
const [category, setCategory] = useState("all");
const shown =
category === "all" ? works : works.filter((work) => work.category === category);あとは shown を map で並べるだけです。ボタンを押すと category が変わり、コンポーネントがもう一度動いて shown が作り直され、画面が描き直されます。
絞り込んだ結果を state に入れない
ここが一番の分かれ道です。次のように、絞り込み後の配列まで state にしたくなります。
JavaScript (JSX)
const [shownWorks, setShownWorks] = useState(works);これはおすすめしません。作品を1件追加したときに works と shownWorks の両方を更新しなければならず、片方だけ直し忘れると画面と実データが食い違います。state は「元のデータ」と「選ばれているカテゴリ」の2つだけにして、表示するものは毎回そこから計算します。計算で出せるものを state にしないのが、React で状態を減らすいちばんの近道です。
押されているボタンを見せる
選択中のカテゴリは、ボタンの見た目でも伝えます。className を三項演算子で出し分ければ済みます。
JavaScript (JSX)
<button
className={category === "web" ? "filter-web is-active" : "filter-web"}
onClick={() => setCategory("web")}
>
Web
</button>onClick に渡すのは関数です。onClick={setCategory("web")} と書くと、描いた瞬間に呼ばれて無限に更新が走ります。() => setCategory("web") のように関数で包むところは第5章のとおりです。
件数と0件の扱い
絞り込みを付けたら、表示中の件数も出します。shown.length を出すだけです。そして前のレッスンの空状態が効いてきます。カテゴリによっては0件になるので、そのときは「該当する作品がありません」を出します。
演習
カテゴリボタンで作品を絞り込みます。