【React】useStateでオブジェクトの配列を編集する方法（メモ）

配列の編集やオブジェクトの編集方法は検索すると出てくるけど、オブジェクトの配列の場合が見つからなかったので、メモとして残しておきます。

オブジェクトの配列ってこんなやつ

[
    { id: 1, name: '山田太郎', point: 10 },
    { id: 2, name: '田中二朗', point: 15 },
    { id: 3, name: '佐藤三郎', point: 0 }
]

例えば、佐藤さんのポイントを+1するボタンを設置してみます。

import { useState } from 'react'

const User = () => {

    const initialData = [
        { id: 1, name: '山田太郎', point: 10 },
        { id: 2, name: '田中二朗', point: 15 },
        { id: 3, name: '佐藤三郎', point: 0 }
    ]
    const [users, setUsers] = useState(initialData)

    const addPoint = (targetID) => {
        setUsers(
            users.map( user => (
                { ...user, 'point': user.id == targetID ? user.point + 1 : user.point }
            ))
        )
    }

    return (
        <button onClick={() => addPoint(3)}>ポイントアップ！</button>
    )
}

export default User

こんな感じ。

mapを使って一行ずつ処理。

条件にあった時だけ処理する三項演算子が便利。