How to get API response in ReactJS

In this article, we will learn how to get API responses in ReactJS. Below are the prerequisites to proceed further. Let’s create a simple reactJS application that will get the API response and display the API response data on a console.

Create react app
Render an API endpoint and store data
Show the data

Create react app

Run the below commands in the command prompt.

npx create-react-app my-app
cd my-app
npm start

After creating the react project, open the project folder and open app.js file from the src folder.

import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>

    </div>
  );
}

export default App

Whatever we write inside this div that this app function is returning, will be visible in the browser.

Note: Please read this article to know in detail about creating a react project.

Now that our react app has been created let’s move on to the next step.

Get API response in ReactJS

Declare a state to store data that we will be receiving from the endpoint

// state for storing data
const [userData, setUserData] = useState([])

As the “rendering data from API ” is not directly connected with our app function, it indeed is a side effect of the function that is being rendered in the browser. Hence we have to handle this API data inside of a useEffect() hook.

Declare useEffect() hook,

  // fetching api data
  useEffect(()=>{
  },[])

Here, we have added an empty array as a dependency of this effect hook so that the page renders only once after getting the data.

Fetch the data from API endpoint

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

Here we are using an API endpoint to get some user data. After fetching, we are converting the data as a JSON data. And after that, we are storing the data inside that state hook that we declared in our previous step. This will return us an array. Later we can use this data to do whatever we want.

import React, { useState, useEffect } from "react";
const App = () => {
  // state for storing data
  const [userData, setUserData] = useState([]);

  // fetching api data
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUserData(data))
  }, [])
  return (
    <div>

    </div>
  );
}

export default App

Show the data

The data that is being stored inside the state hook can be shown in various ways. For now, we will console.log the data, and let’s see if we are getting the data successfully from the API endpoint.

Console.log() the state variable after this useEffect() hook

 console.log(userData);

Check the browser console to see the result

When the site renders for the very first time, there is no user data in the state variable (1). But after it gets the data and renders the site after that, we get the user data inside the state variable that we were expecting (2).

So, that’s how we can get the data from an API in react.