Breaking News: Grepper is joining You.com. Read the official announcement!

ReactJS Axios Delete Request Code Example

Outrageous Ostrich answered on February 15, 2020 Popularity 10/10 Helpfulness 4/10

answer ReactJS Axios Delete Request Code Example

related how to send axios delete to the backend reactjs

ReactJS Axios Delete Request Code Example

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: softhunt.net

Tags: axios javascript reactjs request

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Outrageous Ostrich

0 Answers Avg Quality 2/10

Closely Related Answers

how to send axios delete to the backend reactjs

Comment

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: axios axio

Link to this answer
Share Copy Link

Contributed on Feb 15 2020

Dark Dormouse

0 Answers Avg Quality 2/10

ReactJS Axios Delete Request Code Example

Contents

More Related Answers

ReactJS Axios Delete Request Code Example

Closely Related Answers

how to send axios delete to the backend reactjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.