Fetching Random User Data List

Fetching Random User Data

In this example, we’ll create a React component called RandomUserList that fetches a list of random users from the Random Data API. The component will utilize the useState and useEffect hooks to manage state and handle the data fetching process respectively. Once the data is fetched, it will be displayed on the screen as a list of users.

The RandomUserList component is created as a functional component to encapsulate the logic for fetching and displaying random user data.
We define a state variable userList using the useState hook, initialized to an empty array as we initially don’t have any user data.
Within the useEffect hook, a fetch request is made to the Random Data API endpoint that provides a list of random users. We use the query parameter size=5 to specify that we want to fetch 5 random users.
Upon receiving the response, we parse the JSON and update the userList state with the fetched user data using the setUserList function.
In the component’s return statement, we map through the userList array and display each user’s information in a list format.

Example: This example implements the above-mentioned approach

Javascript

/* RandomUserList.js */
import React,
{
    useState,
    useEffect
} from 'react';
 
function RandomUserList() {
    const [userList, setUserList] = useState([]);
 
    useEffect(() => {
        fetch('https://random-data-api.com/api/v2/users?size=5')
            .then(response => response.json())
            .then(data => setUserList(data));
    }, []);
 
    return (
        <div>
            <h2>Random User List</h2>
            <ul>
                {userList.map(user => (
                    <li key={user.id}>
                        <p>
                            Name:
                            {user.first_name}
                            {user.last_name}
                        </p>
                        <p>
                            Email:
                            {user.email}
                        </p>
                        {/* Add more user data fields as needed */}
                    </li>
                ))}
            </ul>
        </div>
    );
}
 
export default RandomUserList;

Output:

Fetching Random User Data List Output

Fetching Data from an API with useEffect and useState Hook

In modern web development, integrating APIs to fetch data is a common task. In React applications, the useEffect and useState hooks provide powerful tools for managing asynchronous data fetching. Combining these hooks enables fetching data from APIs efficiently.

This article explores how to effectively utilize these hooks to fetch data from an API, focusing on the Random Data API for practical examples

Tags:

#React-Hooks #ReactJS #Web Technologies

Fetching Random User Data

Fetching Random User Data List

Javascript

Fetching Data from an API with useEffect and useState Hook

Similar Reads