How to fetch data from an API using fetch() method in React Js

- Monday, January 31, 2022

How to fetch data from an API using fetch() method in React Js?

Now a day, we can't imagine web application without API so one of the basic requirement of any web application is to communicate with servers through HTTP protocol. This can be easily done using Fetch and Axios.

In this post, we are mainly focusing on Fetch. The Fetch API provides a fetch() method defined on the window object. The fetch method has one mandatory argument i.e., URL of the resource to be fetched. This method returns promise object that can be used to retrieve response of the request.

There are following limitations of Fetch API:

a) Fetch does not allows cancelling request and request timeout.

b) Fetch does not provide a way to intercept HTTP requests.

c) Fetch has no url in request object.

d) No installation is required.

e) Fetch does not have XSRF protection.

f) Fetch uses the body property.

g) Fetch is a two step process when handling JSON data, first - to make actual request. second - to call json() method on the response.

Fetch API React Js

Sample Code:

A) index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

B) App.js

import React from "react";
import "./style.css";
import Users from './Users'

export default function App() {
  return (
    <div>
      <Users />
    </div>
  );
}

C) Users.js

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

function Users() {
  const [userData, setUserData] = useState([]);

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

  return (
    <div>
      <h1>User Data</h1>
      <div id="divTable">
        {userData.map((item) => (
          <div id="divTableRow" key={item.id}>
            <div id="divTableColumn">{item.username}</div>
            <div id="divTableColumn">{item.name}</div>
            <div id="divTableColumn">{item.email}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Users;

D) style.css

#divTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px;
}
#divTableRow {
  display: table-row;
  width: auto;
  clear: both;
}
#divTableColumn {
  float: left;
  display: table-column;
  width: 200px;
  background-color: #ccc;
}