App.js
import { useState, useEffect } from "react";
const API = "https://jsonplaceholder.typicode.com/users";
import "./App.css";
import UserData from "./components/UserData";
function App() {
const [users, setUsers] = useState([]);
const fetchUser = async (API) => {
try {
const res = await fetch(API);
const data = await res.json();
if (data.length > 0) {
setUsers(data);
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
fetchUser(API);
}, []);
return (
<>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<UserData users={users} />
</tbody>
</table>
</>
);
}
export default App;
User Components
import React from "react";
const UserData = ({ users }) => {
return (
<>
{users.map((data) => {
const { id, name, email, address } = data;
return (
<tr key={id}>
<td>{id}</td>
<td>{name}</td>
<td>{email}</td>
<td>{address.city}</td>
</tr>
);
})}
</>
);
};
export default UserData;
