How to use axios in your React App

By admin | | No Comments | React

First install the axios in your working directory

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;