Reactでネストされたオブジェクトの配列内の値を更新する方法

1. ステートを設定する: コンポーネントのステートとして、ネストされたオブジェクトの配列を保持するための変数を作成します。例えば、state変数としてdataを使用します。

const [data, setData] = useState([
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  // 他のオブジェクト
]);

2. 値の更新: 配列内の特定のオブジェクトの値を更新するために、setData関数と組み合わせて新しいステートを設定します。例えば、idが2のオブジェクトのageを更新する場合は次のようにします。

const updateAge = (id, newAge) => {
  const updatedData = data.map(obj => {
    if (obj.id === id) {
      return { ...obj, age: newAge };
    }
    return obj;
  });
  setData(updatedData);
}

3. 値の使用: 更新された値を使用するために、data配列をマップして表示します。

{data.map(obj => (
  <div key={obj.id}>
    <p>Name: {obj.name}</p>
    <p>Age: {obj.age}</p>
  </div>
))}

これで、Reactでネストされたオブジェクトの配列内の値を更新する方法がわかりました。