絞り込みUI

Reactで状態・フォーム・リストを扱う / 全 6 枚

絞った配列は持たない

絞り込んだあとの配列まで state にすると、元データを1件足すたびに両方を直す必要が生まれます。

絞込み後をstateにする

const [shown, setShown] = useState(works);

// works を1件足したら
// shown も書きかえないと食い違う

毎回計算する

const shown =
  category === "all"
    ? works
    : works.filter(
        (w) => w.category === category
      );

state に置くのは、元データと選ばれているカテゴリの2つだけです。

1 / 6

← → キーでも送れます