【React】useStateで直前のデータを保存しつつ、新しいデータを挿入する方法

React学習で頭がパンクしていくのを防いでいくために今日もアウトプットします。

Reactの非常に便利なuseState

Vueを使った後だとReactは本当に保守性に優れているなと日々感じます。

そんなuseStateで直前のデータを保存しつつ新たにデータを挿入する方法をお教えします。

やり方としてはスプレッド構文というものを使います。

とりあえず例を見ていきましょう！

const [students, setStudents] = useState([])

setStudents(prevState => [...prevState, {name: 'Taro', gender: '男'}]);

このようにprevStateを引数にとり、...prevState（スプレッド構文）を使って直前のデータを引き取りそのまま追加しています。

これを行わないとstudentsの中身が全て初期化されて上書きされてしまうのでとても役に立つっていう話です。

まぁこんな感じで今日のアウトプットは終わります。

Thank you for reading