Call API – DELETE Requests with AXIOS | React JS

In the previous three blogs we talked about making GET API Call, POST API Call and PUT API call with Axios. Now we will see how to make Delete request using Axios. As the name implies, we use this request to delete specific data from your endpoint/API.

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 DELETE Requests with AXIOS (Remove/DELETE API Call)

Axios has an inbuilt function called axios.delete() that sends an HTTP DELETE request to a given URL.

DELETE API Call in Function-Based Component

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

function DeleteEmployee() {

    handleDelete() {
        axios.delete(`http://dummy.restapiexample.com/api/v1/delete/8`)
        .then(response => {
            setStatus(response.status);
        })
    }

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

            <input type="button" name="submit" value="Delete" onClick={handleDelete}/>
        </>
    );
}

DELETE API Call in Class-Based Component

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

export default class DeleteEmployee extends React.Component {

    handleDelete = () => {
        axios.delete(`http://dummy.restapiexample.com/api/v1/delete/4`)
        .then(response => {
            this.setState({ status: response.status });
        })
    }

    render() {
        return (
            <>
                <h4>Axios DELETE Request Example in React</h4>

                <input type="button" name="submit" value="Delete" onClick={this.handleDelete}/>
            </>
        )
    }
}

More Information

We have shared more information about Error handling, Headers and API Call with Async Await in our previous article “PUT API Call“.

You May Also Like:

That’s it. It’s as simple as that. Hope you have referred other blogs related to Axios. Happy learning.