API calls with React Hooks

In this article, we will show you how to make API calls with React Hooks. We will use useState hooks to make it working with functional component.

How to consume a RESTful API with React Hooks, Fetching API Data with React.JS, Consuming REST APIs With React Hooks, Introduction to API Calls With React and Axios, React Hooks API Call example.

Way to fetch data using API call with React Hooks

1. Create startup react app with React Hooks
2. Integrate HTML and make API call
3. Output

1. Create startup react app with React Hooks

First you have to create react application. Please refer below link to create startup app.

Create React Application

I would recommend you to check the previous article about the API call in React JS for more understanding. We have implemented the same things using class component.

Your startup structure should look like below.

import React from 'react';
import './App.css';

function App() {
 return (
   <div className="container App">
     <h4>Clue Mediator</h4>
   </div>
 );
}

export default App;

2. Integrate HTML and make API call

Step 1: Add below bootstrap css link in index.html to use bootstrap design in application.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
   integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Step 2: Use state to manage API response and display data using hooks.

For that we will use “useState” to manage state in functional component.

Add below code in App function. Here we used two variables, one for data list and another one for API loading.

const [userList, setUserList] = useState([]);
const [loading, setLoading] = useState(false);

Step 3: Create function to make API call

Here we will create function to make API call and store result in state.

const getUserList = () => {
  setLoading(true);
  fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => {
      setUserList(res.data);
      setLoading(false);
    });
}

Step 4: Create HTML design to display API records in table structure.

We follow the same design as previous article API call in React JS. Just we have updated the syntax of the state variables.

return (
  <div className="container App">

    <h4 className="d-inline-block">Clue Mediator</h4>
    <button
      className="btn btn-info float-right"
      onClick={getUserList}
      disabled={loading}>
      {loading ? 'Loading...' : 'Get User List'}
    </button>
    <div className="clearfix"></div>

    <table class="table mt-3">
      <thead class="thead-dark">
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Avatar</th>
      </thead>
      <tbody>
        {userList.map(x => <tr>
          <td>{x.first_name}</td>
          <td>{x.last_name}</td>
          <td>{x.email}</td>
          <td><img src={x.avatar} width="50" height="50" /></td>
        </tr>)}
        {userList.length == 0 && <tr>
          <td className="text-center" colSpan="4">
            <b>No data found to display.</b>
          </td>
        </tr>}
      </tbody>
    </table>

  </div>
);

After adding all the code in single file, your whole page should look like below.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [userList, setUserList] = useState([]);
  const [loading, setLoading] = useState(false);

  const getUserList = () => {
    setLoading(true);
    fetch('https://reqres.in/api/users')
      .then(res => res.json())
      .then(res => {
        setUserList(res.data);
        setLoading(false);
      });
  }

  return (
    <div className="container App">

      <h4 className="d-inline-block">Clue Mediator</h4>
      <button
        className="btn btn-info float-right"
        onClick={getUserList}
        disabled={loading}>
        {loading ? 'Loading...' : 'Get User List'}
      </button>
      <div className="clearfix"></div>

      <table class="table mt-3">
        <thead class="thead-dark">
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Avatar</th>
        </thead>
        <tbody>
          {userList.map(x => <tr>
            <td>{x.first_name}</td>
            <td>{x.last_name}</td>
            <td>{x.email}</td>
            <td><img src={x.avatar} width="50" height="50" /></td>
          </tr>)}
          {userList.length == 0 && <tr>
            <td className="text-center" colSpan="4">
              <b>No data found to display.</b>
            </td>
          </tr>}
        </tbody>
      </table>

    </div>
  );
}

export default App;

4. Output

Output - API call in React Hooks - Clue Mediator

Demo & Source Code

Github Repository StackBlitz Project