問題一覧に戻る
初級状態管理
問題24: オブジェクトのstate

オブジェクトstateを使って複数のプロパティを管理します。スプレッド構文を使った更新方法を学びます。

import React, { useState } from 'react';

function UserForm() {
  // オブジェクトstateを宣言
  const [user, setUser] = useState({ name: "", age: 0 });

  return (
    <div>
      {/* 名前を更新 */}
      <p onClick={() => setUser({ user, name: "太郎" })}>名前: {user.}</p>
      {/* 年齢を更新 */}
      <p onClick={() => setUser({ user, : 25 })}>年齢: {user.age}</p>
    </div>
  );
}

export default UserForm;
···