React 19 Tutorial #58 Integrate JSON Server API and Loader
Make function for API call.
Display data fon UI from API
Common error fix
Make Loading State
Display Loader
Interview Questions
import { useEffect, useState } from "react";
import './App.css'
export default function App() {
const [userData,setUserData]=useState([])
const [loading,setLoading]=useState(false)
useEffect(()=>{
setLoading(true)
getUserData();
},[])
const getUserData = async()=>{
const url="http://localhost:3000/users";
let response = await fetch(url);
response = await response.json();
console.log(response);
setUserData(response)
setLoading(false)
}
return (
<div>
<h1>Integrate JSON Server API and Loader</h1>
<ul className="user-list user-list-head">
<li>Name</li>
<li>Age</li>
<li>Email</li>
</ul>
{
!loading?
userData.map((user)=>(
<ul key={user.name} className="user-list">
<li>{user.name}</li>
<li>{user.age}</li>
<li>{user.email}</li>
</ul>
))
:<h1>Data Loading...</h1>
}
</div>
)
}
.user-list{
display: flex;
justify-content: space-around;
border: 1px solid #aaa;
margin: 0;
padding: 10px;
list-style: none;
}
.user-list-head{
font-size: 20px;
font-weight: 800;
}