【React】 オブジェクト に対して UseState を使用する

目的：【React】 オブジェクト に対して UseState を使用する
今回のテスト
テキストボックスを編集すると、表示される文字を変える。

■以下前提のコード

sample.js

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

■以下オブジェクトに対して、stateを管理

sample.js

import React, {useState} from 'react'

const sample= () => {
    // 以下オブジェクト（sampleobject, setsampleobject）を定義する。
    const [sampleobject, setsampleobject] = useState({name: ''})
    return (
        <>
        </>
    )
}

export default sample

■以下textフォームでsampleobjectのname属性をvalueに渡し、変更(onChange)があったときにh1タグの{sampleobject.name}を変更する。

sample.js

import React, {useState} from 'react'

const sample= () => {

    
    const [sampleobject, setsampleobject] = useState({name: ''})
    return (
        <>
            <form>
                <input type='text' value={sampleobject.name}
                onChange={event => setsampleobject({...sampleobject, name: event.target.value})}/>
            </form>
            <h1>setsampleobject is {sampleobject.name}</h1>
        </>
    )
}

export default sample

■結果
テキストボックスを編集すると、表示される文字が変わる。