fetch-useeffect-hook.js

import React, { useState, useEffect } from "react";

function App() {
	return (
		<div>
			<Users />
		</div>
	);
}

function Users() {
  const style = {
		textAlign: "left",
		listStyle: "none",
		margin: "0",
		padding: "0",
	};
	const [users, setUsers] = useState([]);
	useEffect(() => {
		fetch("https://jsonplaceholder.typicode.com/users")
			.then((res) => res.json())
			.then((data) => setUsers(data));
	}, []);

	return (
		<div>
			<h3>Dynamic users: {users.length} </h3>
			<ul style={style}>
				{users.map((user) => (
					<li style={{
							border: "1px solid pink",
							margin: "3px",
							padding: "10px",
							width: "400px",
						}}>
						{user.name}, <br />
						{user.phone},<br />
						{user.email}
					</li>
				))}
			</ul>
		</div>
	);
}

export default App;