Reactでチェックボックスの状態を管理する方法【filterで実装】

はじめに

React でチェックボックスの状態管理を学んだ際の備忘録です。
「チェックが入ったか・外れたか」をどのようにロジックで管理するのか最初は迷いましたが、典型的な書き方を整理しました。今後もよく使いそうなので記事にまとめます。

実装例

チェックボックスの描画部分です。
ingredient.id をキーにして、チェックボックスごとに状態を管理しています。

return(
    {ingredientData.map((ingredient) => (
        <div key={ingredient.id}>
            <input
                type="checkbox"
                id={`ingredient-${ingredient.id}`}
                onChange={(e) => handleCheckboxChange(ingredient.id, e.target.checked)}
            />
            <label htmlFor={`ingredient-${ingredient.id}`}>{ingredient.name}</label>
        </div>
    ))}
)

次に、チェックボックスが変更されたときの処理です。

// チェックボックス変更時の状態管理
const handleCheckboxChange = (id: number, checked: boolean) => {
  if (checked) {
    // チェックされた場合 → 配列に追加
    setSelectedIngredients([...selectedIngredients, id]);
  } else {
    // チェックが外された場合 → 配列から除外
    setSelectedIngredients(
      selectedIngredients.filter((selectedId) => selectedId !== id)
    );
  }
};

解説

selectedIngredients は「ユーザーがチェックしたものの id を集めた配列」です。
各チェックボックスは id で管理しています。
•　チェックされたとき → チェックされた id を配列に追加しています。
•　チェックが外れたとき → 外された id を取り除き、新しい配列を作り直します。

ここで使っている filter は「条件に合う要素だけを残す」メソッドです。
今回のコードでは selectedId !== id という条件なので、外された id と一致しない要素だけを残す → つまり「外した id を取り除いた配列」を作っています。

終わりに

チェックボックスの状態を配列で管理するときは filter が便利だと理解できました。

参考