ReactのuseStateで配列の指定した要素のみを更新する方法

Question

前提・実現したいこと

ReactのuseStateで配列の指定した要素のみを更新する方法が知りたいです。

発生している問題

useStateで配列に要素を新たに追加する方法はわかるが、配列の指定した要素のみを更新する方法がわからない。

該当のソースコード

ソースコードはサンプルです。

以下のようにすれば、animalsの末尾に"rabbit"が追加されるのは理解できています。

const [animals, setAnimals] = useState(["dog", "cat", "pig", "bird"]);
setAnimals(prevState => [...prevState, "rabbit"])

しかし、例えばanimalsの2つ目の要素である"cat"を"wolf"に更新したい場合、
setAnimals()の記述方法がわかりません。

試したこと

以下のように記述しましたが、Cannot set properties of undefinedが出てうまく更新できなかった。

const [animals, setAnimals] = useState(["dog", "cat", "pig", "bird"]);
setAnimals(prevState => {
    const newAnimals = prevState
    newAnimals[1] = "wolf"
})

また、ネットでググりましたが、配列の指定した要素を更新するような書き方は見つかりませんでした。
もしかしたらuseStateでは実現できないのでしょうか？

どなたか方法がわかる方がいれば教えていただけると嬉しいです。

Comments

[sooogle]

タグにnuxt.jsとありますが、ReactなのでNext.jsの間違いではないでしょうか？

[react.js]

失礼しました。
ご指摘の通りです。
next.jsに修正致しました。

Answer 1

setAnimalsに渡すのは、prevStateを受け取って更新後のstateを返す関数です。
参考: React公式ドキュメント

現在の実装では戻りがないので、stateがundefinedに更新されてしまっているのだと思います。

setAnimals((prevState) => {
  const newAnimals = [...prevState]; // 再レンダリングさせるため、新しい配列を生成
  newAnimals[1] = 'wolf';
  return newAnimals;
});

とするといいでしょう。

Comments

[react.js]

ありがとうございます。
明示的にreturnが必要なのですね。
後ほど試してみます。

Answer 2

こんなんも。

setAnimals(prevAnimals => prevAnimals.map((animal, i) => i === 1 ? "wolf" : animal))

➡ サンプル

ゆうて関数にする必要ないねんから、

setAnimals(animals.map((animal, i) => i === 1 ? "wolf" : animal))

でえかった ➡ サンプル

Comments

[react.js]

ありがとうございます。
mapを使う方法があったのですね。
後ほど試してみます。