React Axios Delete Request Example

Hello Devs, 

In this tutorial, we will learn React Axios Delete Request Example

Axios is a npm package and the provide to make http request from your application. in this example we will use "jsonplaceholder" api to delete data using axios package.

Follow this step by step guide below. 

Example Code:

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

May this example help you.