Fetch and display data from Rest API on button click in ReactJS

In this reactJS tutorial let’s create a simple ReactJS application to implement with the react, Fetch the data from an API and display it over the webpage.

Problem Statement:

when the user clicks on a button, then the data will be fetched from a Rest API and displayed on the web page.

Below are the steps to fetch data from RestAPI into ReactJS

Setup the environment
Fetch Data
Show result

Setup the environment

Open the project folder in Visual Studio Code.
Go to App.js file and import useState() and useEffect() from 'react'

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

Use those hooks inside the App function in this functional component.

  // declaring usestate that will store users array
  const [users, setUsers] = useState(() => null)
  // declaring useeffect that will help to render data from API
  useEffect(() => {

  }, []);

Fetch Data from Rest API in ReactJS

In the callback function of useEffect() hook, put the API endpoint inside fetch('')

 useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
  }, [])

This will give a response. Convert that response into json

    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
  }, [])

Store the data into the useState() hook.

// declaring usestate that will store users array
  const [users, setUsers] = useState(() => null)
  // declaring useeffect that will help to render data from API
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])

console.log the data and check to the browser’s dev tool whether the data is rendering.

 console.log(users);

Display data from Rest API in ReactJS

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


const App = () => {
  // declaring usestate that will store users array
  const [users, setUsers] = useState(() => null)
  // declaring useeffect that will help to render data from API
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])
  console.log(users);

  return (
    <div >
      <h1 className="text-5xl text-center my-16">
        Showing Fetched Data
      </h1>

    </div>
  );
}

export default App

map through the users array inside the JSX and return a <div> which will contain the data from the API.

<div className="grid grid-cols-3 gap-5 justify-items-center">
        {
          users.map(user =>
            <div class="card w-96 bg-gray-700 shadow-xl">
              <div class="card-body">
                <h2 class="card-title">Name: {user.name}</h2>
                <h4 className="text-xl">Email: {user.email}</h4>

              </div>
            </div>
          )
        }
      </div>

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


const App = () => {
  // declaring usestate that will store users array
  const [users, setUsers] = useState(() => null)
  // declaring useeffect that will help to render data from API
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])
  console.log(users);

  return (
    <div >
      <h1 className="text-5xl text-center my-16">
        Showing Fetched Data
      </h1>
      <div className="grid grid-cols-3 gap-5 justify-items-center">
        {
          users.map(user =>
            <div class="card w-96 bg-gray-700 shadow-xl">
              <div class="card-body">
                <h2 class="card-title">Name: {user.name}</h2>
                <h4 className="text-xl">Email: {user.email}</h4>

              </div>
            </div>
          )
        }
      </div>
    </div>
  );
}

export default App

As we can see, these data are dynamic which is coming from the API that we fetched earlier.

Note: We are using Tailwind CSS and DaisyUI to style the components. To know more about creating the environment with Tailwind CSS, Read This Article.