オブジェクトが要素の配列のstate管理

オブジェクトの要素の配列を管理することは、Webアプリにてよくあります。

components配下にUserList.tsxを作成しましょう。作成したら、以下のようにUser型を定義して、User型の要素を持った配列のstateを作成しましょう。

UserList.tsx◎

import { useState } from "react";

type User = {
  id: number;
  name: string;
  isLogin: boolean;
};

export const UserList = () => {
  const [userList, setUserList] = useState<User[]>([
    { id: 1, name: "太郎", isLogin: false },
    { id: 2, name: "次郎", isLogin: false },
    { id: 3, name: "三郎", isLogin: false },
  ]);
};

そして、userListの1つの要素のisLoginをtrueにする関数を作成しましょう。

流れとしては、newUserListという定数を...userListと展開し、配列に再格納する形で、コピーを作成し、引数で受け取ったindex番目のisLoginをtrueに変更し(newUserList[index].isLogin = true)、setUserListにnewUserListを格納するという形で値を更新します。

UserList.tsx◎

...
export const UserList = () => {
  const [userList, setUserList] = useState<User[]>([
    { id: 1, name: "太郎", isLogin: false },
    { id: 2, name: "次郎", isLogin: false },
    { id: 3, name: "三郎", isLogin: false },
  ]);

  const handleLogin = (index: number) => {
    const newUserList = [...userList];
    newUserList[index].isLogin = true;
    setUserList(newUserList);
  };
};

returnとしては、bootstrapのテーブルを利用して、ユーザー一覧を表示します。

テーブルgetbootstrap

userListをmapで回して要素を格納するのですが、mapの第2引数にインデックスを取得することができるので、何番目の要素のbuttonが押されたかを判別することができます。そのため、onClickの部分をhandleLogin(index)とします。

UserList.tsx◎

...
  const handleLogin = (index: number) => {
    const newUserList = [...userList];
    newUserList[index].isLogin = true;
    setUserList(newUserList);
  };

  return (
    <table className="table">
      <thead>
        <tr>
          <th scope="col">id</th>
          <th scope="col">名前</th>
          <th scope="col">ログイン状態</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        {userList.map((user, index) => (
          <tr key={user.id}>
            <th scope="row">{user.id}</th>
            <td>{user.name}</td>
            <td>{user.isLogin ? "ログイン中" : "未ログイン"}</td>
            <td>
              <button
                className="btn btn-primary"
                onClick={() => handleLogin(index)}
              >
                ログイン
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

では、こちらをApp.tsにて呼び出しましょう。

App.tsx

...
import { Like } from "./components/Likes";
import { UserList } from "./components/UserList"; 
...
        <Like />
      </div>
      <UserList />
...

上記にて、以下のようにログインボタンを押したもののみ、ログイン中と表示されるようになります。