React useStateでオブジェクトを扱う

useState()フックでオブジェクトを作ります

App.js

const [post, setPost] = useState(
    {
      name: "mario",
      age: 5,
    }
  )

オブジェクトを更新する

App.js

import { useState } from 'react'
import './App.css'

function App() {

  const [post, setPost] = useState(
    {
      name: "mario",
      age: 5,
    }
  )

  // ageプロパティを更新する
  const handleClick = () => {
    setPost({ ...post, age: post.age + 1 });
  }

  // nameプロパティを更新する
  const handleChange = (event) => {
    const newName = event.target.value
    setPost({ ...post, name: newName });
  }

  return (
    <div className="App">
      <h1>Hello</h1>
      <button onClick={handleClick}>+</button>
      <p></p>
      <input
        type="text"
        placeholder='Input something...'
        value={post.name}
        onChange={handleChange} />
        {/* オブジェクトを参照 */}
      <p>{JSON.stringify(post, null, '\t')}</p>
    </div>
  )
}

export default App

結果