【React】 配列 に対して UseState を使用する

■前提
Reactの実行環境がある。
App.jsでsample.jsをimport及び呼びだすコードがある。

■以下前提のコード

sample.js

import React, {useState} from 'react'
const sample= () => {
}
export default sample

■以下state(sampleobject)とstateを更新するための関数(setsampleobject)を定義する。
　また、値を追加していく変数（newsampleobject）も定義する。

sample.js

import React, {useState} from 'react'

const sample= () => {
    const [sampleobject, setsampleobject] = useState([])
    const newsampleobject = () => {
        setsampleobject([...sampleobject,{
            id: sampleobject.length,
            name: "Hello"
        }])
    }
    return (
        <>
        </>
    )
}

■以下ボタンと配列の内容を展開する処理を追加。

sample.js

import React, {useState} from 'react'

const sample= () => {
    // 以下オブジェクト（sampleobject, setsampleobject）を定義する。
    const [sampleobject, setsampleobject] = useState([])
    const newsampleobject = () => {
        setsampleobject([...sampleobject,{
            id: sampleobject.length,
            name: "Hello"
        }])
    }
    return (
        <div>
            <button onClick={newsampleobject}>Add New sampleobject</button>
            <ul>
                {sampleobject.map(sampleobject =>(
                    <li key={sampleobject.id}>{sampleobject.name} id: {sampleobject.id}</li>
                ))}
            </ul>

        </div>
    )
}

■結果
ボタンを押すと、Hello id: 連番　が表示される。