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": "george.bluth@reqres.in",
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://reqres.in/img/faces/1-image.jpg"
    },
    {
      "id": 2,
      "email": "janet.weaver@reqres.in",
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://reqres.in/img/faces/2-image.jpg"
    },
    {
      "id": 3,
      "email": "emma.wong@reqres.in",
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://reqres.in/img/faces/3-image.jpg"
    },
    {
      "id": 4,
      "email": "eve.holt@reqres.in",
      "first_name": "Eve",
      "last_name": "Holt",
      "avatar": "https://reqres.in/img/faces/4-image.jpg"
    },
    {
      "id": 5,
      "email": "charles.morris@reqres.in",
      "first_name": "Charles",
      "last_name": "Morris",
      "avatar": "https://reqres.in/img/faces/5-image.jpg"
    },
    {
      "id": 6,
      "email": "tracey.ramos@reqres.in",
      "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.

📰 Read more article

 

The post React Js- Fetch data from API on button click appeared first on Software Development | Programming Tutorials.



Read More Articles