【React.js】useStateで配列の特定の要素を更新する方法

React.js
2023年2月1日
Tomoki
目次

はじめに

本記事では、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>
  );
}

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

basketballをbadmintonに更新しています。

まとめ

useStateで配列の特定の要素を更新する方法を紹介しました。

  • 配列に追加する場合は、スプレッド構文を使う方法があります。
  • 配列の特定の要素を更新する場合はmap()を使う方法があります。
React.js
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次