[ React ] useStateを使用して配列に追加する方法

完成コード

配列にオブジェクト追加する実装です。（テキスト入力　→　追加ボタン押下　→　配列にオブジェクト追加）
以下、コードの解説していきます。

sample.jsx

import React, { useState } from "react";

const AddSampleArray = () => {
  const [str, setStr] = useState("");
  const [arr, setArr] = useState([]);
  const newMemo = { id: arr.length + 1, memo: str };
 
  const addArrBtn = (e) => {
    e.preventDefault();
    if (!str) return;
    setArr([...arr, newMemo]);
    setStr("");
  };

  return (
    <>
      <input
        type="text"
        value={str}
        onChange={(e) => setStr(e.target.value)}
        placeholder="入力する"
      />
      <button onClick={addArrBtn}>配列に追加する</button>
    </>
  );
};

export default AddSampleArray;

１.入力エリア作成

入力エリア、配列に追加するボタンを作成します。

sample.jsx

import React from "react";

const AddSampleArray = () => {

  return (
    <>
     <input
        type="text"
        placeholder="入力する"
      />
      <butto>配列に追加する</button>
    </>
  );
};

export default AddSampleArray;

２.useStateで現在の配列と新しい配列の状態を管理する準備

useStateを呼びだして➀と➁を定義します。
あと、inputタグに以下の記述を追加して➀のuseStateを使用して状態管理します。

sample.jsx

import React, { useState } from "react";

const AddSampleArray = () => {
  const [str, setStr] = useState("");  //➀入力されたデータを管理
  const [arr, setArr] = useState([]);  //➁オブジェクトを追加する配列の状態を管理
  const newMemo = { id: arr.length + 1, memo: str }; //arrに追加するオブジェクトを定義　※idは無くてもOK

   return (
    <>
      <input
        type="text"
        value={str}   //更新されたstrを受け取る
        onChange={(e) => setStr(e.target.value)}   //onChangeによってsetStrを呼び出してstrを更新
        placeholder="入力する"
      />
      <button>配列に追加する</button>
    </>
  );
};

export default AddSampleArray;

３.ボタン押下時の処理を実装

buttonタグにOnClickイベントを登録して配列に追加する関数を呼び出します。

sample.jsx

import React, { useState } from "react";

const AddSampleArray = () => {
  const [str, setStr] = useState("");
  const [arr, setArr] = useState([]);
  const newMemo = { id: arr.length + 1, memo: str };
  
  //配列にnewMemoオブジェクトを追加するボタン
  const addArrBtn = (e) => {
    e.preventDefault();  //ブラウザのデフォルト動作（ページリロード）をキャンセル
    if (!str) return;  //入力が無い場合に処理を終わらせる
    setArr([...arr, newMemo]);  //オブジェクトを新しい配列を生成
    setStr("");  //入力エリアの文字を削除
  };

  return (
    <>
      <input
        type="text"
        value={str}
        onChange={(e) => setStr(e.target.value)}
        placeholder="入力する"
      />
      <button onClick={addArrBtn}>配列に追加する</button> 
    </>
  );
};

export default AddSampleArray;

以上、ReactでuseStateを使用し配列に追加する方法でした。