Introduction
In this tutorial I will show you how to delete the existing resource via REST API DELETE request using React JS framework. I will use ready made available REST API https://jsonplaceholder.typicode.com/posts for testing purpose. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework.
Related Posts:
Prerequisites
Knowledge of HTML and JavaScript, Create React JS Application
Project Directory
The name of the project root directory is react-rest-delete-api. Now you can delete everything from the src directory.
Controller Class
Create RestController.js file under src directory with below content. Notice that you need to import the required module or component such as import React from 'react'
.
You can learn about componentDidMount()
here at https://reactjs.org/docs/react-component.html.
The DELETE URI deletes an existing resource in the server. Here we will delete the post that has an id 1.
import React from 'react';
class RestController extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
});
}
render() {
return (
<div>
<p><b>Resource deleted in the server</b></p>
</div>
)
}
}
export default RestController;
Export the RestController at the end of the RestController class so that we can use this class in other modules such as we have used it in below index.js file.
View File
Finally create index.js file under src directory to start up the application.
Here we have called <RestController/>
component and writing the output of the RestController
to the div id marked as root
.
Open the file src/public/index.html, you will find a div with “root” id. Update the title in this file as “React – REST API DELETE Example”.
import React from 'react';
import ReactDOM from 'react-dom';
import RestController from './RestController'
ReactDOM.render(
<RestController />,
document.getElementById('root')
);
Testing the Application
Now execute the command npm start
from command prompt and you will see the response data after creating the new resource in the server from https://jsonplaceholder.typicode.com/posts in browser at http://localhost:3000.
Resource deleted in the server
The output in the browser you will see as shown in the following image:

Source Code
Thanks for reading.
Now, If it’s needed to drop a bunch of ids as 1 2 3 4 5 6 7 all of them, Is there any request to bulk delete them?
I guess some like
request.delete(“http://example.com/stuffs/1,2,3,4,5,6,7”) or
request.delete(“http://example.com/stuffs/ids?1,2,3,4,5,6,7”) or
request.delete(“http://example.com/stuffs/?=1-7”) or any other
Thanks a lot!