Working with backend services such as a REST API is one of the most common tasks of a frontend developer. No matter what React app you're building, at some point, you'll probably want to make a request to a database server or an endpoint and grab some data to display to the user. For instance, if you're building a social media app and you want to display comments on a certain post to the user, you need to make a request to a dedicated API to fetch all the comments and then process it further in your app.
In this guide, you'll learn how to call an API to fetch its response in your React app.
Let's run through an example to get a better understanding of how you can call the API response. Create an empty React app by running:
1npx create-react-app react-api-response
Next, install the Axios library. Axios is a library that simplifies the process of interacting with APIs.
1npm i axios
The endpoint you're going to use in this example is https://jsonplaceholder.typicode.com/comments. It's a free REST API endpoint that returns some dummy data you can play around with. You can choose any other such API or use your own API as well.
Whatever response you get from an API, you need to store it locally within that component so you can process it further. Import the useState
hook from React to create a piece of state
to store the response.
1import React,{useState} from 'react';
Create a state variable comments
and a hook to set the value of this state variable setComments
using the useState
hook.
1const [comments,setComments]=useState([])
Since the comments returned will be an array of objects with each object representing a single comment, the initial value of comments
is an empty array.
Usually, you want to fetch data inside a component when its entire DOM loads. In other words, when your App
component first mounts on the DOM, you need to make a request to the API. In React, this can be carried out via a component lifecycle method called componentDidMount()
, which is fired when the component first loads on the DOM. A simple hooks implementation can be carried out by firing an asynchronous function using the async
keyword inside useEffect()
and passing an empty array as a parameter, as shown below.
1useEffect(() => {
2 fetchComments();
3}, [])
Create the fetchComments()
method, as shown below.
1const fetchComments=async()=>{
2 const response=await Axios('https://jsonplaceholder.typicode.com/comments');
3 setComments(response.data)
4}
Inside fetchComments()
, call the API by passing the endpoint to Axios and store the response in a variable using the await
keyword. All the comments from the endpoint can be referred to by calling the data
property on the response object
to set the state
. You can check if you correctly appended comments to your state
using the following piece of code:
1useEffect(() => {
2 console.log(comments)
3}, [comments])
So far in this guide, you have called the API response and stored it inside your state
. You can process it further using the state
. For instance, you can cycle through the comments
and render each comment
on the DOM, as shown below.
1 return (
2 <div className="App">
3 {
4 comments && comments.map(comment=>{
5 return(
6 <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}>
7 <h4>{comment.name}</h4>
8 <p>{comment.email}</p>
9 </div>
10 )
11
12 })
13 }
14
15 </div>
16 );
Have a look at the entire App
component, which calls the API on mounting, sets the response to the component's state
, and outputs it on the DOM.
1import './App.css';
2import Axios from 'axios'
3import React,{useState,useEffect} from 'react';
4
5function App() {
6 const [comments,setComments]=useState([])
7 useEffect(() => {
8 fetchComments();
9 }, [])
10 useEffect(() => {
11 console.log(comments)
12 }, [comments])
13 const fetchComments=async()=>{
14 const response=await Axios('https://jsonplaceholder.typicode.com/comments');
15 setComments(response.data)
16 }
17 return (
18 <div className="App">
19 {
20 comments && comments.map(comment=>{
21 return(
22 <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}>
23 <h4>{comment.name}</h4>
24 <p>{comment.email}</p>
25 </div>
26 )
27
28 })
29 }
30 </div>
31 );
32}
33
34export default App;
You can interact with an API in different ways by making different kinds of requests from your app. For instance, you can make a POST
request to add a new comment by storing it in the database. However, to process any dynamic data from a server on loading a component, you should make requests in componentDidMount()
and store them inside your state
, as demonstrated. Instead of simply outputting this data, you can explore more options, such as filtering or sorting data, adding pagination, etc.