RalaCode

44件の記事があります

【React】useStateで配列を更新して表示する方法を解説

【React】useStateで配列を更新して表示する方法を解説
サムライエンジニアプラス

「React開発で配列を更新したい」

今回は上記のお悩みにお答えします。

React開発では配列を扱う場面があります。
そして、配列を動的に変化させて更新したいときがあると思います。

結論から言うと、「useState」を使うことで配列を更新できます。

この記事では、useStateを使ってどうやって配列を更新するのかを解説します。
解説には、Reactのサンプルアプリを作りながら進めていきます。

どんなサンプルアプリを作るかと言うと以下です。

「ボタンをクリックすると文字列が増えていくアプリ」

では、進めていきます。

useStateとは

useStateはReact hookの一つで、関数コンポーネントでstateを管理するための機能です。

これだけだと何のことかわからないですよね。
簡単に言うと以下です。

ある状態から別の状態に変化させたいときにuseStateを使う」

「それでもわからない」って方は、以下の記事が参考になるかと思います。
useStateの使用例を見ることができます。

【React】onClickでclassNameをつけたり外したりする方法
【React】onClickでclassNameをつけたり外したりする方法
記事を読む
【React】styled-componentsの使い方【具体例あり】
【React】styled-componentsの使い方【具体例あり】
記事を読む

state変数を定義する

ここでは、Reactの基本的な開発環境を想定して解説を進めていきます。

まずはuseStateを使ってstate変数を定義します。
App.jsに以下のように記述します。

/* App.js */

import React, { useState } from "react";

const App = () => {
  const [list, setList] = useState(["リスト "]);

  return (
    <>
      <div>{list}</div>
    </>
  );
};

export default App;

1行目ではuseStateをimportしています。
そして、以下のようにコンポーネント内でstate変数を定義しています。

const [list, setList] = useState(["リスト "]);

上記ではlistというstate変数を定義しており、初期値は「リスト 」という文字列が入った配列です。

この配列をなんらかのきっかけで更新していきます。
ここでは、「ボタンをクリックしたときに配列の中の文字列が増えていく」という仕組みを作っていきます。

まずは配列を更新する関数を定義しておきます。

配列を更新する関数を定義する

では、以下のように記述を追加します。

/* App.js */

import React, { useState } from "react";

const App = () => {
  const [list, setList] = useState(["リスト "]);

  /* ↓関数を追加 */
  const listUp = () => {
    const newList = [...list, "リスト "];
    setList(newList);
  };

  return (
    <>
      <div>{list}</div>
    </>
  );
};

export default App;

上記コードの真ん中辺りで、配列の要素を増やす関数「listUp」を定義しています。

const listUp = () => {
  const newList = [...list, "リスト "];
  setList(newList);
};

このコードの中では、「newList」という新しい配列を定義しています。
newListの中に「...list」という記述がありますが、これを「スプレッド構文」と言います。

[...list, "リスト "]」となっているので、現在の「list」配列に「リスト 」という文字列を加えるという意味です。
「リスト 」という文字列が加わった新しい配列を「newList」として定義しています。

この新しい配列newListを「setList」に入れることで、配列が更新されます。

配列の更新が難しいのは、このように更新したい配列をnewListみたいな変数として定義しないといけないところじゃないかなと思います。

ちょっと複雑になってしまってすみません。
いったん整理すると、関数listUpが発動すると以下のことが起こります。

配列の中に"リスト "という文字が追加される

関数listUpが発動するごとに、"リスト "という文字列が増えていきます。
そういう関数をここで定義したわけです。

あとは、ボタンをクリックしたときに関数listUpが発動するように設定していきます。

ボタンクリックで関数を発動させる

では、以下のように記述を追加します。

/* App.js */

import React, { useState } from "react";

const App = () => {
  const [list, setList] = useState(["リスト "]);

  const listUp = () => {
    const newList = [...list, "リスト "];
    setList(newList);
  };

  return (
    <>
      <div>{list}</div>
      {/* ↓buttonを追加 */}
      <button onClick={listUp}>追加</button>
    </>
  );
};

export default App;

ここでは、以下のようなボタンを追加しました。

<button onClick={listUp}>追加</button>

このボタンをクリックすることで、関数listUpを発動させることができます。

試しに、ボタンをクリックしてみてください。
「リスト 」という文字が増えたと思います。

ボタンをクリックした回数分だけ、「リスト 」という文字がどんどん増えていきます。
ブラウザを更新すれば、元に戻ります。

まとめ

最後に記事の内容をまとめます。

  • useStateは関数コンポーネントでstateを管理するための機能

  • まずはuseStateを使ってstate変数を定義した

  • 配列を更新する関数を定義した

  • その関数をボタンクリックで発動する仕組みを作った

というわけで記事は終わりです。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

GatsbyJSの開発環境を構築する手順

GatsbyJSの開発環境を構築する手順

【Netlify】お名前.comで取得した独自ドメインを適用する方法

【Netlify】お名前.comで取得した独自ドメインを適用する方法

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

【React】onClickでclassNameをつけたり外したりする方法

【React】onClickでclassNameをつけたり外したりする方法

GatsbyJSでYarnを使う場合に必要な設定を解説

GatsbyJSでYarnを使う場合に必要な設定を解説

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy