Hello friends today i am talking about API Calling in React Application.
import { useState, useEffect } from “react”
export const ScreenTest = () => {
const [user, setUser] = useState([])
const [data,setData] = useState(”)
const [isLoader, setLoader] = useState(true)
let url = ‘https://dummyjson.com/products’
// let dataUser = async () => {
// const res = await fetch(url)
// const data = await res.json();
// console.log(data, “check data”)
// setUser(data.users)
// }
function dataUser(url) {
setTimeout(() => {
fetch(url)
.then(res => res.json())
.then((data) => setUser(data.products));
}, 5000)
setLoader(false)
}
console.log(user, “check data”)
useEffect(() => {
dataUser(url);
}, [url])
if (isLoader) {
return (
<>
{
<h1>Loading…</h1>
}
</>
)
}
return (
<>
{
user.filter((elem) => elem.brand.toLowerCase().includes(data || “”)).map((item, idKey) =>
<>
<h1>{item.brand}{idKey}</h1>
<p>{item.category}</p>
{/* <p>{item.name.first}</p> */}
{/* <img src={item.thumbnail} width={50} height={50} /> */}
</>
)
}
<div className=”chat–list__wrapper”> <h4>Messages</h4></div>
<div className=”search-header”> <input className=”chat–search”
type=”text” placeholder=”Search People” onChange={(e) => setData(e.target.value)} /></div>
<div className=”chat–list”>
<div className=”chat-item”>
<div className=”chat–item__left”>
<img src=”” alt=”” />
</div>
<div className=”item__right “>
<h4>Name</h4>
<p>Phone Number</p>
</div>
</div>
</div>
</>
)
}
| React Tutorial | React |
| HomePage | https://apkseries9.site/ |