複数項目の入力値を配列でstate管理したい

はじめに

グラフの描画などで複数の入力値を1つにまとめて管理したい状況があったので簡単にまとめてみます。

やりかた

①型を定義
②配列をstateで定義
③各項目をstateで定義
④各項目の入力値を配列に追加する

type Datas = {
  height: number;
  age: number;
};

export const Hoge = () => {
  const [datas, setDatas] = useState<Datas[]>([]);

  const [height, setHeight] = useState("");
  const [age, setAge] = useState("");

  const onClickButton = () => {
    if (height !== "" && age !== "") {
      setDatas([
        ...datas,
        {
          height: Number(height),
          age: Number(age),
        },
      ]);
    }
    setHeight("");
    setAge("");
  };
// onClickButtonの処理をどこかに追加する
return (<div>hoge</div>);
};

おわりに

データ管理の基本系は何も考えずに実装できるようになりたいです。