React 大量のチェックボックスの結果をメンテナンス性よく記述したい

Question

Reactでチェックボックスがチェックされたかどうかの結果を
ローカルストレージに保存する機能を以下のように作りました。

import './App.css';
import { useState, useEffect } from 'react';

//チェックボックスの初期値を設定
const App = () => {
  const [currentCheckboxId, setCheckboxId] = useState({
    check1: false,
    check2: false,
  });

//ローカルストレージに保存されている1つ目と2つ目のチェックボックスの結果を取得
  useEffect(() => {
    const data = {
      check1: localStorage.getItem('check1') === 'true' ? true : false,
      check2: localStorage.getItem('check2') === 'true' ? true : false,
    };
    setCheckboxId(data);
  }, []);

//1つ目のチェックボックスの結果をローカルストレージに保存
  const setCheckbox = (event) => {
    const check1 = event.target.checked;
    localStorage.setItem('check1', check1);

    setCheckboxId((prevData) => ({
      ...prevData,
      check1: check1,
    }));
  };

//2つ目のチェックボックスの結果をローカルストレージに保存
  const setCheckbox2 = (event) => {
    const check2 = event.target.checked;
    localStorage.setItem('check2', check2);

    setCheckboxId((prevData) => ({
      ...prevData,
      check2: check2,
    }));
  };

//ローカルストレージの内容削除
  const removeCheckbox = (event) => {
    const check1 = event.target.checked;
    const check2 = event.target.checked;
    localStorage.clear();
    setCheckboxId((prevData) => ({
      ...prevData,
      check1: check1,
    }));
    setCheckboxId((prevData) => ({
      ...prevData,
      check2: check2,
    }));
  };

  return (
    <div className='App'>
      <h1>リロードしても消えないチェックボックス</h1>
      <label>
        チェックボックス1
        <input type='checkbox' onChange={setCheckbox} id='first' checked={currentCheckboxId.check1} />
      </label>

      <label>
        チェックボックス2
        <input type='checkbox' onChange={setCheckbox2} id='second' checked={currentCheckboxId.check2} />
      </label>
      <br />
      <button onClick={removeCheckbox}>チェックを全て外す</button>
    </div>
  );
};

export default App;

コードではチェックボックスが2個ですが
本来は70個チェックボックスを作りたいです。
この場合愚直に3.4.5と変数の数字だけ変えて70回書くしか方法はないのでしょうか？
今後のことも考えてもメンテナンス性の良いコードにしたいと
考えているのですがどの様にまとめれば良いか思いつきません。
是非アドバイス等よろしくお願いします。

Comments

[hoshi-takanori]

配列などを使ってみては…。

[TAKAYA]

アドバイスありがとうございます
ただ配列を使って今回の要件と同じ機能を
どのように実装すれば良いのか
自分には考えつかないので
もし宜しければサンプル等をもらえると助かります

Answer 1

複数のコンポーネントをレンダーする
https://ja.reactjs.org/docs/lists-and-keys.html#rendering-multiple-components

リンク先を参考に修正してみました。
(Reactは勉強中ですのであまりスッキリ記述できていないかもしれません・・)
不明な点がありましたらコメントください。

import './App.css';
import { useState, useEffect } from 'react';

//チェックボックスの初期値を設定
const App = () => {
  const checkboxLength = 3
  const getInitialValues = () => Array(checkboxLength).fill(false)
  const [checked, setChecked] = useState(getInitialValues())

  //ローカルストレージに保存されているチェックボックスの結果を取得
  useEffect(() => {
    const json1 = localStorage.getItem('checked')
    if (json1) {
      const array1 = JSON.parse(json1)
      setChecked(array1)
    }
  }, []);

  // チェックボックスの結果をローカルストレージに保存
  const onChange = (e, i) => {
      const array1 = checked.map((x2, i2) => i2 === i ? e.target.checked : x2)
      setChecked(array1)
      const json1 = JSON.stringify(array1)
      localStorage.setItem('checked', json1);
  }

  // 複数のチェックボックス
  const checkboxes = checked.map((x, i) => (
    <div>
      <label>
        チェックボックス{i + 1}
        <input type='checkbox' checked={x} onChange={e => onChange(e, i)} />
      </label>
    </div>
  ))

  //ローカルストレージの内容削除
  const removeCheckbox = () => {
    localStorage.clear();
    setChecked(getInitialValues())
  };

  return (
    <div className='App'>
      <h1>リロードしても消えないチェックボックス</h1>
      {checkboxes}
      <button onClick={removeCheckbox}>チェックを全て外す</button>
    </div>
  );
};

export default App;

Comments

[TAKAYA]

とても丁寧な回答ありがとうございます。
自分ではとても思いつきませんでした。

ローカルストレージに保存の部分なのですが

onChange={e => onChange(e, i)}

でHTMLのイベント情報とindex番号を

const onChange = (e, i) => {
const array1 = checked.map((x2, i2) => i2 === i ? e.target.checked : x2)
setChecked(array1)
const json1 = JSON.stringify(array1)
localStorage.setItem('checked', json1);
}

の関数に渡して

i2 === i ? e.target.checked : x2

で同じindex番号の値のみ更新しているという考えであってますか？

[退会済みユーザー]

コメントありがとうございます。

> で同じindex番号の値のみ更新しているという考えであってますか？

そうです、合っています。
ここが個人的にはスッキリしない感じがしていたところですが、
配列を部分的に更新するには、私の現時点のスキル的にはこんな感じになるかな、
といった回答でした・・

[TAKAYA]

質問の回答ありがとうございます
今回提示していただいたコードの全容が理解できました。

自分もxg63ex2bさんのように柔軟な考えでコードが書けるよう
これからも勉強していきます。
ありがとうございました