React Js-Fetch Data From API In Functional Component

 In this post, we are going to discuss Fetch data from API and display it in table React Js in a functional component

we can easily fetch the data inside a functional component using Hooks.Hooks are functions that allow us “hook into” React state and lifecycle features from function components in our application. let you know that we can not use Hooks inside classes.

One more important feature of Hooks is that Hooks allow us to split one component into smaller functions based on what pieces are related, rather than forcing a split based on lifecycle processes. 

React JS provides a built-in Hooks like useState and we can also create our own Hooks to reuse stateful behavior in components.

Make API calls out of React Functional Component

API ENDPOINT:https://reqres.in/api/users?page=1

{
"page": 1,
"per_page": 6,
"total": 12,
"total_pages": 2,
"data": [
    {
"id": 1,
"email": "[email protected]",
"first_name": "George",
"last_name": "Bluth",
"avatar": "https://reqres.in/img/faces/1-image.jpg"
    },
    {
"id": 2,
"email": "[email protected]",
"first_name": "Janet",
"last_name": "Weaver",
"avatar": "https://reqres.in/img/faces/2-image.jpg"
    },
    {
"id": 3,
"email": "[email protected]",
"first_name": "Emma",
"last_name": "Wong",
"avatar": "https://reqres.in/img/faces/3-image.jpg"
    },
    {
"id": 4,
"email": "[email protected]",
"first_name": "Eve",
"last_name": "Holt",
"avatar": "https://reqres.in/img/faces/4-image.jpg"
    },
    {
"id": 5,
"email": "[email protected]",
"first_name": "Charles",
"last_name": "Morris",
"avatar": "https://reqres.in/img/faces/5-image.jpg"
    },
    {
"id": 6,
"email": "[email protected]",
"first_name": "Tracey",
"last_name": "Ramos",
"avatar": "https://reqres.in/img/faces/6-image.jpg"
    }
  ]
}

Component Code
Userlist.JS

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

const Userlist = () => {
const [userList, setusers] = useState(null);
  useEffect(() => {
    getuesers();
  }, []);
const getuesers = () => {
    fetch("https://reqres.in/api/users?page=1")
      .then((res) => res.json())
      .then(
        (result) => {
          console.log(result.data);
          setusers(result.data);
        },
        (error) => {
          console.log(error);
          setusers(null);
        }
      );
  };
if (!userList) return <div>No Record Found</div>;
return (
    <div>
      <h2>Fetch data inside Funcational Component </h2>
      <table className="table">
        <thead>
          <tr>
            <th>User Id</th>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>ZipCode</th>
          </tr>
        </thead>
        <tbody>
          {userList.map((user) => (
            <tr>
              <td>{user.id}</td>
              <td>
                <img
                  src={user.avatar}
                  style={{ height: "50px", borderRadius: "50%" }}
                ></img>{" "}
              </td>
              <td>{user.email}</td>
              <td>{user.first_name}</td>
              <td>{user.last_name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
export default Userlist;

I’m assuming that you are familiar with React Js framework and creating React Js applications. If not then please go through the following articles:

The useEffect hook is utilized to perform side effects in the component. It's used here to fetch the list of users from a specified API endpoint (https://reqres.in/api/users?page=1) when the component mounts. The function is defined to make a GET request to the specified URL. Upon receiving a response, it logs the result data to the console and updates the userList state with the fetched data. If there's an error during the request, it logs the error and sets userList to null.

If userList is null, it renders a message saying "No Record Found". This handles cases where data hasn't been fetched yet or if there's an error fetching the data.

Otherwise, it renders a table displaying the list of users. Each user's details such as id, avatar, email, first name, and last name are displayed in separate table rows.

• What does props mean in react?
• Components in React Js?
• State in React Js

In the above example, useState is the Hook that needs to call inside a function component to add some state to it. The useState returns a pair, the first element is the current state i.e initial value, and the second one is a function that permits us to update it. you can understand useState is similar to this.setState in a class component.