How to Work With HTTP DELETE Method in React JS

In this article, we are going to learn about HTTP Delete Method in React JS. Working with APIs is a very common thing and delete method is one of them. As we know, fetch and axios are the ways with which we can access the API, and today we will see, how we can perform Deletion of the data from fetched data from API.

What is HTTP Delete Method in React JS?

HTTP delete method, which is necessary to learn, because it will help us to control data flow coming from API. Of course, we will use these CRUD operations in backend react.

Sending HTTP requests with any verb is made simple by the Fetch API (built-in) and libraries such as Axios. The Fetch API is a built-in browser method for performing HTTP requests, whereas Axios is an external package we must install in our project before using.

HTTP Delete Method in React JS: Fetch()

The fetch() is a built-in JavaScript function which allows us to make network related requests. It is simple to use, and it doesn’t need any external package to use. It, basically, returns a promise that resolves to a response object, which is useful when accessing response data.

Let see a demo example, here we have a URL in fetch method. Notice that this URL pretty much different than normal API URL, because we want to delete specific resource and we are providing that resource’s URL. Then after, we need to specify DELETE method in method section. And lastly we are just fetching rest of the data.

fetch('https://example.com/api/resources/123', {
  method: 'DELETE'
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));

HTTP Delete Method in React JS: axios()

Axios is another popular library for making network requests in React. It is basically an external library which need to be imported and install in the React application. Axios is a promise based library that makes it easy when working with network requests. It is also much powerful and flexible method then fetch as well. Here is a basic example for Post method with axios:

Now in the below example, we have to import axios, in order to work with network requests. To use Delete method in axios we can use axios.delete(). The axios.delete() method returns a promise, so we use the await keyword to wait for the response. and these data will automatically gets modified. we don’t need to convert it to the JSON format, We then log the response data to the console.

The Axios method is pretty simple and fewer code to work with, so axios looks much cleaner than fetch() method. One more thing to note that in order to use Delete method, we should use .catch(), in order to perform error handling and it is essential.

import axios from 'axios';

axios.delete('https://example.com/api/resources/123')
  .then(res => console.log(res.data))
  .catch(error => console.error(error));

HTTP Delete Method in React JS: Class Components

As we have seen, both examples of fetch and axios method, you can implement these in any component either class or functional. In class component you should make API calls in componentDidMount() method and in functional component we often make API calls in useEffect() hook. Here is a basic example to understand:

Functional component:

import React, { Component } from 'react';

function Example {
  handleDelete = () => {
    fetch('https://example.com/api/resources/123', {
      method: 'DELETE'
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
  }

  render() {
    return (
      <button onClick={this.handleDelete}>Delete</button>
    );
  }
}

export default Example;

Class Component:

import React, { Component } from 'react';

class Example extends Component {
  handleDelete = () => {
    fetch('https://example.com/api/resources/123', {
      method: 'DELETE'
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
  }

  render() {
    return (
      <button onClick={this.handleDelete}>Delete</button>
    );
  }
}

export default Example;

One more thing is here, we can use fetch() or axios() in componentDidMount() or in useEffect() but only if you want to delete some resource which is not even required. But in above case we have added this deletion method on the button or on some event which is actually good way to handle data.

You may Also like:

• How to Make E-commerce Product Card Using ReactJS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React
• How to Make Quote Generator in React