The simplest way to use Axios to fetch data from an API in ReactJS

In this tutorial, I will show you how to fetch data from an API to your react app. It doesn’t matter what backend technology you are using (i.e Nodejs, WordPress, etc) you can fetch data from the backend using API and Axios to your react app. I won’t explain what is an API, What is Axios because you can google it. So let us start the tutorial.

Requirements

• axios
• JsonPlaceHolder for dummy API

1. First, we need to create a react app.
2. After that open your terminal and install axios

npm install axios --save

3. Now we will create an instance for baseURL. This instance is created so that we don’t have to manually change the base URl of the API in each component. So to create the instance we need to go our app src folder and create a file name axios.js

4. Now open your project inside your favorite IDE and paste this inside your newly created axios.js file

import axios from 'axios';const instance = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com/'
});export default instance;

Note: change https://jsonplaceholder.typicode.com/ with your own API base URL.

5. Now we will create our components folder to put all our components in one place. Now in your src folder create a new folder name components and inside that create another folder name users.

6. Now create a file users.js inside your users folder and create the react class component by pasting this

import React, { Component } from 'react'
export default class users extends Component {
   render() {
       return (
           <div>
               
           </div>
       )
   }
}

Now import your users.js file in your app.js file inside your src folder.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Users from './components/users/users'

function App() {
 return (
   <div className="App">
    <Users></Users>
   </div>
 );
}

export default App;

8. Now import axios from your newly created axios.js file from your src folder to the component.

import axios from '../../axios'

9. Now it’s time to add a class constructor and assigns the initial state Users : []

constructor(props) {
       super(props);
       this.state = {
           Users: []
       };
   }

10. Now we will create a function to call our users data from an API using axios to our component. Create a function name getUsersData after your class constructor and paste this inside your function

axios
           .get(`/users`, {})
           .then(res => {
               const data = res.data
               console.log(data)
})
           .catch((error) => {
               console.log(error)
           })

Note: you need to call getUsersData function inside your componentDidMount lifecycle method by inserting this.getUsersData()
11. Your users.js will look something like this.

import React, {Component} from 'react'
import axios from '../../axios'

export default class users extends Component {
   constructor(props) {
       super(props);
       this.state = {
           Users: []
       };
   }
   getUsersData() {
       axios
           .get(`/users`, {})
           .then(res => {
               const data = res.data
               console.log(data)

           })
           .catch((error) => {
               console.log(error)
           })

   }
   componentDidMount(){
       this.getUsersData()
   }
   render() {

       return (
           <div></div>
       )
   }
}

12. Now run your app by typing npm startin your terminal and check the browser console. You will see an array of objects inside your console.

Hola  we have successfully called our data from an API to our react app using axios.

13. Now it’s time to print the data in our app. For this, we will use the javascript map and arrow function to loop through our array of objects.

14. Just after your console.log(data) paste this

const users = data.map(u =>
                   <div>
                   <p>{u.id}</p>
                   <p>{u.name}</p>
                   <p>{u.email}</p>
                   <p>{u.website}</p>
                   <p>{u.company.name}</p>
                   </div>
                   )
this.setState({users})

15. Now call your users data using this.state.users inside return to print in your app

{this.state.users}

16. Finally, your users.js file will look like this.

import React, {Component} from 'react'
import axios from '../../axios'

export default class users extends Component {
   constructor(props) {
       super(props);
       this.state = {
           Users: []
       };
   }
   getUsersData() {
       axios
           .get(`/users`, {})
           .then(res => {
               const data = res.data
               console.log(data)
               const users = data.map(u =>
                   <div>
                   <p>{u.id}</p>
                   <p>{u.name}</p>
                   <p>{u.email}</p>
                   <p>{u.website}</p>
                   <p>{u.company.name}</p>
                   </div>
                   )

                   this.setState({
                       users
                   })

           })
           .catch((error) => {
               console.log(error)
           })

   }
   componentDidMount(){
       this.getUsersData()
   }
   render() {

       return (
           <div>
               {this.state.users}
           </div>
       )
   }
}

Refresh your browser and tada all your data is printed.

Thanks for reading…..