useStateで定義した配列内のオブジェクトの値を変更する

はじめに

今回アプリを作成中useStateをオブジェクトにして複数のキーを持たせていたのですが、そのうち一つの値を変更するにはどうしたらいいのかというところでかなり苦戦したので自分の備忘録として記事にして残すことにしました。

状況

ここはとあるバー、useStateでの話です。
お客さんをid等で管理して、未成年はadult = falseとして
お酒を出さないようにしていました。

ある日、一人の若い青年が日付が変わった頃に入店しました。
バーテンダーはその顔に見覚えがありました。
バーの常連、喜一郎おじいちゃんの孫、太郎君です。

しかし彼は未成年だったはず、今日はどうしたのだろう？

カウンター席に座った太郎くんに今日はどうしたの？と話しかけます。

すると、ついさっき２０歳になったからここのお酒を飲みたいというのです。

なるほど、日付が変わってすぐにここに来たのはそういうことか！

そんなにお酒を飲んでみたかったのか、そう思うととてもほっこりしました。

さっそくadult = trueにしてお酒を出そうと思います。

  const [customer, setCustomer] = useState([
    ~
    { id:154, name: "田中　喜一郎", adult: true },
    ~
    { id:16325, name: "田中　太郎", adult: false },
    ~
  ]);

この時、idを引数にして、adultを変更するための関数を作成します。

const changeAdult = (id) => {
    setCustomer(
      customer.map((c) => {
        if (c.id === id) {
          return { ...c, adult: !c.adult };
        } else {
          return c;
        }
      })
    );
}

あとは、buttonのonClickにこの関数を指定してあげれば
大丈夫です！

<button onClick={() => changeAdult(c.id)}>
大人の階段
</button>

無事大人になった太郎くんは、初めてのお酒を美味しそうに飲んでいました。

また今度お爺ちゃんと飲みに来るそうです。

完