How to use axios in your React App

March 17, 2020

First install the axios in your working directory

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Get Request

We are using componentDidMount life time hooks to call the axios.get to get JSON data. Retrieved data will be put in state and will be used inside the the render() function

import React from 'react'
import axios from 'axios'

export class Tasks extends React.Component {

    state = {
        tasks: []
    }


    async componentDidMount() {

        axios.get('http://localhost:3000/api/tasks')
            .then(res => {
                const tasks = res.data.data;
                this.setState({ tasks });
            })
    }


    render() {
        return (
            <div>
                <ul>
                    {this.state.tasks.map(task => <li>{task.title}</li>)}
                </ul>

            </div>
        )
    }
}
export default Tasks;