react fetch data from api functional component

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

react fetch data from api 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:

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.

 

Ashok Patel

I'm a software engineer, having good experience in software programming web designing with great command on ASP.NET, React JS, Angular JS,.NET Core HTML5, JavaScript, T-SQL, JQuery.
Also have great experience in Electronics and electrical engineers design.
I like to do RND and Research.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.