useStateの配列要素を追加したい場合の記述

はじめに

ポートフォリオでuseStateで作成した配列要素を追加したい場面があり、学んだ内容を備忘録として残そうと思います。

前提

例えば、果物の情報を格納している配列があったとします。

const [fruits, setFruits] = useState([{
    fruitsName: "apple",
    fruitsPrice: 200
  }])

現状はfruitsの中身は下記のようになっていますが、ここに複数の果物の情報を格納したいとします。

fruits = [{fruitsName: "apple", fruitsPrice: 200}]
//理想は下記のように複数の果物の情報を格納していきたい
[{fruitsName: "apple", fruitsPrice: 200}, {fruitsName: "lemon", fruitsPrice: 100}]

配列要素を追加する方法

配列要素に追加をするためには、下記のように記述をします。

setFruits(fruit => [...fruit,{ fruitsName: "lemon", fruitsPrice: 100 }])
//fruits = [{fruitsName: "apple", fruitsPrice: 200}, {fruitsName: "lemon", fruitsPrice: 100}]になる

ちなみに、"..."はスプレッド構文というもので、ものすごく乱暴にざっくりと説明すると、現在のfruitsの配列の情報を全て持ってきてくれるものです。

"...fruits,"を追加したい情報の前に記述して[]で囲むことで、fruitsの配列の最後に"{ fruitsName: "lemon", fruitsPrice: 100 }"を追加する、ということができます。

この配列を追加する方法に＋αの記述をすることで、フォームに入力した値を配列に格納ができるようになります。

参考

スプレッド構文も理解まだ浅いと思うのでqiitaにまとめようと思います。