# オブジェクトが要素の配列のstate管理
オブジェクトの要素の配列を管理することは、Webアプリにてよくあります。
`components`配下に`UserList.tsx`を作成しましょう。作成したら、以下のように`User`型を定義して、`User`型の要素を持った配列のstateを作成しましょう。
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`を格納するという形で値を更新します。
{% code title="UserList.tsx◎" %}
```tsx
...
export const UserList = () => {
const [userList, setUserList] = useState([
{ 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);
};
};
```
{% endcode %}
returnとしては、bootstrapのテーブルを利用して、ユーザー一覧を表示します。
{% embed url="" %}
`userList`を`map`で回して要素を格納するのですが、`map`の第2引数にインデックスを取得することができるので、何番目の要素のbuttonが押されたかを判別することができます。そのため、`onClick`の部分を`handleLogin(index)`とします。
...
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`にて呼び出しましょう。
...
import { Like } from "./components/Likes";
import { UserList } from "./components/UserList";
...
<Like />
</div>
<UserList />
...
上記にて、以下のようにログインボタンを押したもののみ、ログイン中と表示されるようになります。
