Call API – POST Requests with AXIOS | React JS

Axios is a client HTTP API based on the XMLHttpRequest interface that is provided by browsers worldwide. In this tutorial we will see how to make a post request using Axios. In our previous blogs, we have discussed how to make a get request using Axios and how to make a put request using Axios.

Before getting into the coding part, make sure to install axios using npm/yarn:

Table of Contents

Axios Installation & Import in React JS

Installation

With NPM: npm install axios 

With Yarn: yarn add axios

Import

import axios from "axios";

How to make a POST Requests with AXIOS (ADD/POST API Call)

We can make a post request with Axios using the function: axios.post(). This function takes its first parameter as the API URL and the second parameter is the body for the HTTP request.

POST API Call in Function-Based Component

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}
        </>
    );
}

POST API Call in Class-Based Component

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}
            </>
        )
    }
}

More Information

You can read more about Error handling, Headers and API Call with Async Await in our previous article “PUT API Call“.

You May Also Like:

That’s all for this tutorial. Hope you had a good learning experience. Feel free to comment down your doubts.