How to Make Axios POST Request in React?

In the previous tutorial, we learned about Axios GET requests and now we will learn about how we can make a POST request using Axios in react application. It is the same way as we did in the Axios HTTP GET request.

We will make a POST request to create or insert the data into the database. We will send request parameters in POST request and will also take an example to send HTTP headers with it.

So let’s start this tutorial with focusing on Axios POST request to insert the data into the database table and show the success response. We will also see some examples to better understand.

Let’s get started!!!

Axios HTTP POST Request in React

Before proceeding further make sure you have a proper react application installed on your machine and working fine. For more details check how to install react and create an application.

OK, after installation, you need to install the Axios package using the npm. Then we will also see some basic examples of Axios POST requests and we will also use the Axios API to make POST requests.

Install Axios From NPM

You have to run the following npm command to install the Axios package in your project. Make sure you are in the project directory.

This command will install all the dependencies for the Axios package, so you can import it into your react component and then use it.

Command to install the axios package

npm install axios

yarn add axios

Syntax to import the axios package

import axios from "axios";

Axios POST Request in Class-Based Component

We will take a class-based react component to make a POST request using the Axios package. Let’s make handleSubmit() function to make a POST request click on the button that has a onclick function refer to handleSubmit function.

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

export default class CreateEmployee extends React.Component {
    state = {
        status: "",
        employee_name: "",
        employee_salary: "",
        employee_age: ""
    }

    handleSubmit = () => {
        const { employee_name, employee_salary, employee_age } = this.state;

        axios.post(`http://dummy.restapiexample.com/api/v1/create`, {
            employee_name: {employee_name},
            employee_salary: {employee_salary},
            employee_age: {employee_age}
        })
        .then(response => {
            this.setState({ status: response.status });
        })
    }

    render() {
        const { status, employee_name, employee_salary, employee_age } = this.state;
        return (
            <>
                <h4>Axios POST Request Example in React</h4>

                <input type="text" name="employee_name" value={employee_name}/>
                <input type="text" name="employee_salary" value={employee_salary}/>
                <input type="number" name="employee_age" value={employee_age}/>

                <input type="button" name="submit" value="Submit" onClick={this.handleSubmit}/>

                {status && status}
            </>
        )
    }
}

In the above example, we make an HTTP POST request using the Axios in the handleSubmit() arrow function. We send the post data with the request as an object and it will insert that data into the database and return the success status along with created data details.

After that, we show the success message in the render() method of the component. You can print it or show the response data accordingly as you want.

Axios POST Request in Function-Based Component

Now we will take a function-based react component to make POST requests using the Axios. The function-based component will also make a handleSubmit() function to run the Axios request.

The handleSubmit() function work same as in class-based function and run when the function call.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CreateEmployee() {
    const [status, setStatus] = useState('');
    const [employee_name, setEmployeeName] = useState("");
    const [employee_salary, setEmployeeSalary] = useState("");
    const [employee_age, setEmployeeAge] = useState("");

    handleSubmit() {
        axios.post(`http://dummy.restapiexample.com/api/v1/create`, {
            employee_name: {employee_name},
            employee_salary: {employee_salary},
            employee_age: {employee_age}
        })
        .then(response => {
            setStatus(response.status);
        })
    }


    return (
        <>
            <h4>Axios POST Request Example in React</h4>

            <input type="text" name="employee_name" value={employee_name}/>
            <input type="text" name="employee_salary" value={employee_salary}/>
            <input type="number" name="employee_age" value={employee_age}/>

            <input type="button" name="submit" value="Submit" onClick={handleSubmit}/>

            {status && status}
        </>
    );
}

In the above react hook example, we use the Axios to make a POST request in the handleSubmit() function and set the response in the state using the useState hook. And then return a success message from the state in return.

Axios POST Request with Error Handling

In the above two examples, we used only then() promise to return the response and not handle any error. So now in this scenario to handle the error, we will use the catch() promise method. Let’s see the example code.

handleSubmit = () => {
    const { employee_name, employee_salary, employee_age } = this.state;
    axios.post(`http://dummy.restapiexample.com/api/v1/create`, {
        employee_name: {employee_name},
        employee_salary: {employee_salary},
        employee_age: {employee_age}
    })
    .then(response => {
        this.setState({ status: response.status })
    })
    .catch(error => {
        this.setState({ errorMessage: error.message });
    });
}

It will send an HTTP POST request with Axios and return the response but if any error exists then the catch() method will return the error message and you can print that error in the component.

Axios POST Request with HTTP Headers

To send the HTTP headers with POST requests using the Axios, you have to pass the third parameter as an object of header values. Look at the following example for reference.

handleSubmit = () => {
    const { employee_name, employee_salary, employee_age } = this.state;
    const headers = {
        'Authorization': 'Bearer token_value',
    };
    axios.post(`http://dummy.restapiexample.com/api/v1/create`, {
        employee_name: {employee_name},
        employee_salary: {employee_salary},
        employee_age: {employee_age}       
    }, { headers })
    .then(response => {
        this.setState({ status: response.status })
    })
    .catch(error => {
        this.setState({ errorMessage: error.message });
    });
}

In the above example, we make a const for the header object and then pass it into Axios POST request as a third parameter. You can also pass any customer headers if you want to do.

Axios POST Request Using async/await

In the above examples, we used then() promise method to wait till promise returns the response and then continues on further action. But you can also do this same thing with async and await javascript expressions.

You have to add the async expression before the name of the function and then use the await expression with the Axios request action. See the following example to better understand.

handleSubmit = async() => {
    const { employee_name, employee_salary, employee_age } = this.state;
    const response = await axios.post(`http://dummy.restapiexample.com/api/v1/create`, {
        employee_name: {employee_name},
        employee_salary: {employee_salary},
        employee_age: {employee_age}    
    });
    this.setState({ status: response.status })
}

The above example sends the HTTP POST request using the Axios with async/await expression. So the function will not proceed further until the request gets a response.

Axios POST Request Using Axios API

The Axios API is the same way to make an HTTP request, you just have to pass the relevant config data to Axios as parameters like method name, request URL, response type, etc.

handleSubmit = () => {
    const { employee_name, employee_salary, employee_age } = this.state;
    axios({
        method: 'post',
        url: 'http://dummy.restapiexample.com/api/v1/create',
        data: {
            employee_name: {employee_name},
            employee_salary: {employee_salary},
            employee_age: {employee_age}
        }
    })
    .then(response => {
        this.setState({ status: response.status })
    })
}

All the above examples, you can customize to make Axios requests and send the body data with that and then get the response and show it on frontend popup notification like “New record has been inserted successfully.”

Conclusion

So in this tutorial, you learn about how to make an HTTP POST request using Axios and send the body data to insert into the database. We also covered how to use the Axios POST method in class-based components and function-based components.

You also see how to handle the error with Axios while sending the POST requests and some more useful ways to use the Axios package with async/await, send HTTP headers, Axios API.

If you face any error while making POST requests then do let me know in the comment section, I will respond to you as soon as possible.