🐸

useStateで配列の特定の要素を更新する方法

2021/10/02に公開約1,600字

はじめに

タイトルの通りですが、ReactのuseStateで配列の特定の要素を更新する方法がググっても出てこなかったので記事にしようと思います。

useStateで配列に追加する方法

配列に要素を追加する方法はネット上にあふれている。
以下がその例で、スプレッド構文を使用するのが推奨されている。

const [sports, setSports] = useState([]);
const addSports = () => {
    setSports([...sports, "baseball"]);
}

useStateで配列の特定の要素を更新する方法

こっちが本題だ。
それでは配列の特定の要素だけを更新したい場合はmap()を使うと実現できる。
以下の例だと、indexが2の要素を"badminton"に、それ以外の要素は元のままの"sport"になるように記述している。

const initialState = [
    "baseboll",
    "soccer",
    "basketball",
    "volleyball",
    "tennis"
];
const [sports, setSports] = useState([]);
const updateSportsList = () => {
    setSports(
        sports.map((sport, index) => (index === 2 ? "badminton" : sport))
    );
};

render()を含めた全体のコード例は以下のようになる。

import { useState } from "react";

export default function App() {
  const initialState = [
    "baseboll",
    "soccer",
    "basketball",
    "volleyball",
    "tennis"
  ];

  const [sports, setSports] = useState(initialState);

  const updateSportsList = () => {
    setSports(
      sports.map((sport, index) => (index === 2 ? "badminton" : sport))
    );
  };

  return (
    <div className="App">
      <h1>Sample</h1>
      <ul>
        {sports.map((sport) => {
          return <li>{ sport }</li>;
        })}
        <button onClick={ updateSportsList }>更新する</button>
      </ul>
    </div>
  );
}

実際に動かした結果は以下である。(スタイルは本質でないので気にしないでください)
basketballbadmintonに更新しています。

まとめ

useStateで配列の特定の要素を更新する方法を説明した。

  • 配列に追加する場合は、スプレッド構文を使う方法がある。
  • 配列の特定の要素を更新する場合はmap()を使う方法がある。

Discussion

ログインするとコメントできます