【React】useState()を使って連想配列のデータを更新する

使い慣れてないので覚え書きとしてまとめ。
React の useState() を使用する際に、連想配列のデータを更新する方法についてです。

参考にさせていただいた記事はこちら。

[React] useStateをどう使うか(配列、オブジェクト) – Qiita
https://qiita.com/10mi8o/items/896df09ad89e41d48bac

まず、state を定義します。

const [checked, setChecked] = useState({});

今回は、複数あるチェックボックスのチェック済み/未チェックを保持したいので、checked、setChecked という名前にしています。

そして、Checkbox の onChange() で下記の関数を実行すれば OK です。

const changeChecked = e => {
  setChecked({ ...checked, [e.target.value]: e.target.checked });
}

今回は、連想配列の key に Checkbox の value を使用するようにしています。

なお、Checkbox は下記のように記述しています。

<Checkbox
  name="checked[]"
  value={item.label}
  onChange={changeChecked}
  checked={checked[item.label] ?? false} />

必要な記述は以上です！
やり方さえ分かってしまえば、そこまで難しくないですね。
また、とてもスマートに記述できるので、個人的に好きな書き方です。

以上、React の useState() を使用して連想配列のデータを更新する方法についてでした。
やり方さえ分かってしまえば