-
Notifications
You must be signed in to change notification settings - Fork 0
/
UserList.tsx
45 lines (37 loc) · 996 Bytes
/
UserList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React, { useEffect, useState } from "react";
interface UserData {
id: number;
name: string;
email: string;
}
const UserList: React.FC = () => {
const [users, setUsers] = useState<UserData[]>([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch("https://astropsick.devopsick.com/users");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
setUsers(data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []); // Empty dependency array to ensure the effect runs only once when the component mounts
return (
<div>
<h1>User List</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
<strong>{user.name}</strong> - {user.email}
</li>
))}
</ul>
</div>
);
};
export default UserList;