# オブジェクトのstate管理複数のステートを1つのグループとしてまとめられる場合は、オブジェクトとしてstate管理するのが一般的です。例えばユーザーのfirstNameとlastName、loginCountなどユーザーのプロパティなので、Userオブジェクトとして管理します。User.tsにてUserオブジェクトの型エイリアスを定義しましょう。定義したら、User型のstateを作成しましょう。`useState`のように宣言することで、stateの型を定義することができます。

import { useState } from "react";

type User = {
  firstName: string;
  lastName: string;
  loginCount: number;
};

export const UserDetail = () => {
  const [user, setUser] = useState<User>({
    firstName: "sample",
    lastName: "太郎",
    loginCount: 0,
  });
...

ここで、`user`の`loginCount`のみ増やす関数を作成しましょう。もともとのuser.loginCountに1を足した定数を定義して、`setUser`の引数にUser型のオブジェクトを渡しますが、`firstName`と`lastName`は元々のstateの値のままで、loginCountは先ほと定義した定数を格納します。

  const handleLogin = () => {
    const newCount = user.loginCount + 1;
    setUser({
      firstName: user.firstName,
      lastName: user.lastName,
      loginCount: newCount,
    });
  };

上記のように記述した場合、プロパティの数だけ、記述が多くなってしますので、スプレッド構文を利用することで、以下のように特定の値のみ更新することが可能です。

...
  const [user, setUser] = useState<User>({
    firstName: "sample",
    lastName: "太郎",
    loginCount: 0,
  });

  const handleLogin = () => {
    const newCount = user.loginCount + 1;
    setUser({
      ...user,
      loginCount: newCount,
    });
  };
...

この関数を呼び出すボタンと、`user`の情報を表示するようにしましょう。

 ...
   return (
    <div>
      <p>{user.firstName} {user.lastName}<p>
      <p>ログイン回数: {user.loginCount} </p>
      <div>
        <button className="btn btn-success" onClick={handleLogin}>
          ログイン
        </button>
      </div>
    </div>
  );
  ...

上記にて、以下のようにログインボタンを押すことで、表示されるカウントが増えるかと思います。