How to Use Axios with React

Axios is an immensely popular NPM package that makes HTTP requests super easy from both the server and directly in the browser.

But how can Axios be used use in a React.js website or application?

In this article, we'll show you how to both make API requests and use the data in a React application.

Let's get started!

Install Axios
Make a GET Request
Use the Data in Your React App

Install Axios

The first thing we need to do is install the Axios NPM package in our React application.

Open a terminal window and navigate to the root directory of your React application and execute one of the commands below to install the NPM package:

NPM:

npm install axios --save

Yarn:

yarn add axios

When the install has completed, axios will be added to your project's dependencies and you can now import the package into your project.

Open the app.js file of your React application (or whichever file you want to use) and import the axios library at the top:

. . .

import axios from "axios"

. . .

Now it's ready for you to use in your code.

In the next sections, we'll walk through how to make some requests.

Make a GET Request

First, let's make a GET request using the Axios NPM package we just installed.

We'll be making our requests to the free JSON Placeholder service. They provide a fake REST API that returns data for testing and prototyping applications.

Add this code to the app.js or another React file of your choice:

import React, { Component } from "react"
import axios from "axios"

export default class extends Component {
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/users/1")
    .then(response => {
      console.log(response.data)
    })
    .catch(error => {
      console.log(error)
    })
  }

  render() {
    return (
      <div>
        <span>Page Content Goes Here</span>
      </div>
    )
  }
}

Let's break down the code from above.

Inside the componentDidMount() function, we make a HTTP GET request to the JSON Placeholder REST API using the axios.get() method.

We provide the URL we are making the GET request to as the sole parameter to the axios.get() function, which will return data for a fake user from the JSON Placeholder REST API.

The axios.get() function is promise based, so we use the .then() function to console.log() the response.data object to the browser console once the axios.get() function has successfully retrieved the data.

And we also use the .catch() promise to console.log() any errors if they occur.

Run the code in your browser and open up the developer console.

You should see an object similar to the one below logged in the console:

{id: 1, name: "Leanne Graham", username: "Bret", ...}

Good work! Now that we have the data pulling in via axios, let's do something with it!

Use the Data in Your React App

Once the API call has been made, we might have to wait a few seconds for the API to return our data. Therefore, we need to store the data in our React component's state and then display the results in the body of our page when it's done.

Our webpage will map it's value to what's held in the state so that it will display the requested data once the axios.get() function finishes and populates the state with data.

First, let's create the state for our React component using the constructor() function:

. . .

constructor(props) {
  super(props)
  this.state = {
    name: null,
    email: null
  }
}

. . .

For demonstration purposes, we'll only show the name and email data for the fake user. Both will have a value of null until they are populated with data.

Next, we need to update the axios.get() function in componentDidMount() to update the state once the data arrives from the REST API.

We'll use the this.setState() method to give the state updated values. Here's what the code looks like:

. . .

componentDidMount() {
  axios.get("https://jsonplaceholder.typicode.com/users/1")
  .then(response => {
    this.setState({
      name: response.data.name,
      email: response.data.email
    })
  })
  .catch(error => {
    console.log(error)
  })
}

. . .

When you save your changes and run that code, the data from our API request is now being held in our React component's state.

The last thing we need to do is update the code in our render() method to display the data.

Here's the code:

. . .

render() {
  return (
    <div>
      <span>{this.state.name} - {this.state.email}</span>
    </div>
  )
}

. . .

When you preview the results in your browser, you should see the name and email displayed!

For your reference, here's what the full code for your file should look like when you're done:

import React, { Component } from "react"
import axios from "axios"

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: null,
      email: null
    }
  }

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/users/1")
    .then(response => {
      this.setState({
        name: response.data.name,
        email: response.data.email
      })
    })
    .catch(error => {
      console.log(error)
    })
  }

  render() {
    return (
      <div>
        <span>{this.state.name} - {this.state.email}</span>
      </div>
    )
  }
}

Feel free to play around with the code and experiment!

How to Use Axios with React

Table of Contents

Install Axios

Make a GET Request

Use the Data in Your React App