Introduction
In modern web applications, managing data often involves performing CRUD operations: Create, Read, Update, and Delete. In previous examples, we learned how to retrieve and add employee data using React and API integration.
GET API Integration
POST API Integration
In this article, we will learn how to implement the DELETE operation in React by calling a backend API. The goal is to allow users to remove employee records from the database directly from the React UI.
We will use the Fetch API to send a DELETE request to the backend service.
Prerequisites
Before implementing the DELETE functionality, ensure the following:
A working React application
A backend API with a DELETE endpoint
Basic understanding of React Hooks
Example API endpoint used in this article:
http://localhost:5288/api/Employee/{id}
This endpoint deletes an employee record based on the provided ID.
Step 1: Display Employee Data
First, fetch employee data from the API and store it in React state.
const [employee, setEmployee] = useState([]);
useEffect(() => {
fetch("http://localhost:5288/api/Employee")
.then(response => response.json())
.then(data => setEmployee(data))
.catch(error => console.log(error));
}, []);
This code retrieves employee records from the API when the component loads.
Step 2: Create a Delete Function
Next, create a function that sends a DELETE request to the API.
const deleteEmployee = (id) => {
fetch(`http://localhost:5288/api/Employee/${id}`, {
method: "DELETE"
})
.then(response => {
if(response.ok){
setEmployee(employee.filter(emp => emp.id !== id));
}
})
.catch(error => console.log(error));
}
Explanation
method: "DELETE" tells the API that we want to remove a record.
The employee ID is passed in the URL.
After deletion, the state is updated using filter() to remove the deleted employee from the UI.
Step 3: Add Delete Button in UI
Now add a delete button for each employee.
employee.map((emp) => (
<div key={emp.id}>
<h3>Employee ID: {emp.id}</h3>
<h3>Employee Name: {emp.name}</h3>
<h3>Department: {emp.department}</h3>
<button onClick={() => deleteEmployee(emp.id)}>
Delete
</button>
</div>
))
When the user clicks the button, the deleteEmployee function will be called.
Step 4: Complete React Component
Below is the complete example.
import React, { Fragment, useEffect, useState } from 'react'
function Employee() {
const [employee, setEmployee] = useState([]);
useEffect(() => {
fetch("http://localhost:5288/api/Employee")
.then(response => response.json())
.then(data => setEmployee(data))
.catch(error => console.log(error));
}, []);
const deleteEmployee = (id) => {
fetch(`http://localhost:5288/api/Employee/${id}`, {
method: "DELETE"
})
.then(response => {
if(response.ok){
setEmployee(employee.filter(emp => emp.id !== id));
}
})
.catch(error => console.log(error));
}
return (
<Fragment>
<h1>Employee Details</h1>
{employee.map((emp) => (
<div key={emp.id}>
<h3>Employee ID: {emp.id}</h3>
<h3>Employee Name: {emp.name}</h3>
<h3>Department: {emp.department}</h3>
<button onClick={() => deleteEmployee(emp.id)}>
Delete
</button>
</div>
))}
</Fragment>
)
}
export default Employee
Application Flow
The DELETE operation follows this flow:
User clicks Delete button
↓
React sends DELETE request
↓
Backend API removes record
↓
Database updated
↓
React updates UI state
Advantages of This Approach
Simple API integration using Fetch
Real-time UI update without page refresh
Clean state management using React hooks
Conclusion
In this article, we learned how to implement the DELETE operation in React by calling a backend API using the Fetch API. We created a delete function, connected it to a button in the UI, and updated the state to reflect changes immediately.
This approach is widely used in modern applications where React communicates with backend APIs to perform CRUD operations.