On this sample you can find how can consuming restApi from one external service and how can populate one component on react
Importing modules
import React, { useEffect, useState } from "react";
import "./styles.css";
Here, we’re importing the React library, along with the useEffect and useState hooks from React. The useEffect hook lets us perform side effects in function components, while the useState hook lets us add state to function components. We’re also importing a CSS file that should contain your styles.
Defining the API URL
const myJsonData = "https://randomuser.me/api/?results=4";We’re defining the URL of the API we want to fetch data from. This API returns a list of random users.
App component
export default function App() {
const [data, setData] = useState([]);
const [lightboxData, setLightboxData] = useState(null);
useEffect(() => {
fetch(myJsonData)
.then((response) => response.json())
.then((jsonData) => {
setData(jsonData.results);
})
.catch((err) => {
console.log("ERROR", err);
});
}, []);
return (
<div className="App">
{data.map((user) => (
<InfoCard key={user.login.uuid} user={user} setLightboxData={setLightboxData} />
))}
{lightboxData && <LightBox data={lightboxData} closeLightbox={() => setLightboxData(null)} />}
</div>
);
}
The App component is the main component of the application. It contains two state variables, data and lightboxData. data stores the list of users fetched from the API, and lightboxData stores the data of the user that should be displayed in the lightbox.
In the useEffect hook, we fetch data from the API and store it in data.
The return statement of the App component maps over the data array and creates an InfoCard for each user. Each InfoCard is given the user data and a function to set the lightbox data. If lightboxData is set, a LightBox component is rendered with the user’s data and a function to close the lightbox.
InfoCard component
function InfoCard({ user, setLightboxData }) {
const handleClick = () => {
setLightboxData({
name: `${user.name.first} ${user.name.last}`,
imageURL: user.picture.large,
});
};
return (
<div id="container">
<div id="picture" onClick={handleClick}>
<img src={user.picture.large} alt="User" />
</div>
<div id="dataRecord">
<div id="nameUser">{`${user.name.first} ${user.name.last}`}</div>
<div id="streetUser">
{`Address: ${user.location.street.name} City: ${user.location.city} State: ${user.location.state}`}
</div>
<div id="phoneUser">{`Phone: ${user.phone} Cell: ${user.cell}`}</div>
<div id="emailUser">{`Email: ${user.email}`}</div>
</div>
</div>
);
}
The InfoCard component represents a single user. It takes in user and setLightboxData as props. When the image is clicked, setLightboxData is called with the user’s name and image URL, causing the lightbox to appear.
LightBox component
function LightBox({ data, closeLightbox }) {
return (
<div
style={{
left: 0,
top: 0,
backgroundColor: "#000000b0",
height: "100%",
width: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
}}
onClick={closeLightbox}
>
<h3>{data.name}</h3>
<img src={data.imageURL} alt="User" />
</div>
);
}
The LightBox component takes in data and closeLightbox as props. data contains the name and image URL of the user that should be displayed, and closeLightbox is a function that can be called to close the lightbox. The component itself is a full-screen div with a dark background that contains the user’s name and image. When the div is clicked, closeLightbox is called, causing the lightbox to disappear.
