浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

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

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

 

まず、state を定義します。

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

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

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

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

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

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

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

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

 

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

  • この記事いいね! (0)