ReactJS Axios Delete Request with Code Example

We’ll look at how to delete a request using ReactJS Axios in this section. To understand the HTTP delete request, we’ll utilize reactJS. Let’s say we want to send an HTTP delete request using Axios react. In this case, we must follow the step-by-step approach for sending and deleting requests in react, as shown in the example.

React is a JavaScript library.   It has the ability to create a user interface. When a page renders, reactive JavaScript frameworks such as Angular and React may need to revalidate the data. Following that, a large number of requests will be sent between various external services and the front end and back end. We can keep things D.R.Y with defaults, interceptors, and instances by using the Axios. Axios is use in complicated apps that constantly make API requests. Separate instances can be generate for different APIs. Interceptors can be use to handle global error. The default for common headers can be unset or set. Axios adds a bit of extra capability to the mix. The capability will be handy for React-based apps.

Example – ReactJS Axios

Axios is an npm package that is use to send the HTTP request from our app. The Axios package is used by the “jsonplaceholder” API to erase the data, and we will utilize this API in our example here is the link jsonplaceholder.typicode.com. When we utilize the internet to obtain materials, it is not an immediate procedure. JavaScript encapsulates the promise API. These promises will be handy for doing asynchronous operations. Asynchronous tasks are extremely beneficial for doing activities in sequential order. That is to say, it has no effect on what happens.

import React from 'react';  
    
import axios from 'axios';  
    
export default class PostList extends React.Component {  
  state = {  
    photos: []  
  }  
    
  componentDidMount() {  
    axios.get(`https://jsonplaceholder.typicode.com/photos`)  
      .then(res => {  
        const photos = res.data;  
        this.setState({ photos });  
      })  
  }  
    
  deleteRow(id, e){  
    axios.delete(`https://jsonplaceholder.typicode.com/photos/${id}`)  
      .then(res => {  
        console.log(res);  
        console.log(res.data);  
        const photos = this.state.photos.filter(item => item.id !== id);  
        this.setState({ photos });  
      })  
    
  }  
    
  render() {  
    return (  
      <div>  
        <h1> Example of React Axios Delete Request </h1>  
    
        <table className="table table-bordered">  
            <thead>  
              <tr>  
                  <th>ID</th>   
                  <th>Title</th>  
                  <th>Image</th> 
                  <th>Action</th>  
              </tr>  
            </thead>  
    
            <tbody>  
              {this.state.photos.map((photo) => (  
                <tr>  
                  <td>{photo.id}</td>  
                  <td style={{textAlign:"center"}}>{photo.title}</td>  
                  <td><img src={photo.thumbnailUrl}></img></td> 
                  <td>  
                    <button className="btn btn-danger" onClick={(e) =>          this.deleteRow(photo.id, e)}>Delete</button>  
                  </td>  
                </tr>  
              ))}  
            </tbody>  
    
        </table>  
      </div>  
    )  
  }  
}  

Output:

1st
Result

The result after deleting 1st id

2nd
The result after deleting 1st id

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

If you want to learn more about the ReactJS programming language then click the link to see our last article ForEach Loop in React with Example – Loop Array in React JS

Leave a Comment