How to Send Axios Delete to the Backend ReactJS in JavaScript

Example: Simple Delete Button

Here's a React component that implements a delete button:

import React, { useState } from 'react';
import axios from 'axios';

const DeleteButton = ({ id, onDelete }) => {
   const [loading, setLoading] = useState(false);

   const handleDelete = async () => {
      setLoading(true);
      try {
         await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
         console.log(`Post ${id} deleted successfully`);
         onDelete(id); // Callback to update parent component
      } catch (error) {
         console.error('Delete failed:', error.message);
      } finally {
         setLoading(false);
      }
   };

   return (
      <button onClick={handleDelete} disabled={loading}>
         {loading ? 'Deleting...' : 'Delete'}
      </button>
   );
};

export default DeleteButton;

Method 2: Using axios() with Method Configuration

An alternative approach uses the general axios() function with a configuration object:

import axios from 'axios';

const deleteData = async (id) => {
   try {
      const response = await axios({
         url: `https://jsonplaceholder.typicode.com/posts/${id}`,
         method: 'delete',
         headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer your-token-here'
         }
      });
      console.log('Delete successful:', response.status);
      return response.data;
   } catch (error) {
      console.error('Delete failed:', error.message);
      throw error;
   }
};

Example: Delete with Confirmation Modal

This example shows a more user-friendly approach with confirmation:

import React, { useState } from 'react';
import axios from 'axios';

const DeleteConfirmationModal = ({ id, itemName, onDelete }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);

   const handleDelete = async () => {
      setLoading(true);
      try {
         await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
         console.log(`Item ${id} deleted successfully`);
         onDelete(id);
         setIsOpen(false);
      } catch (error) {
         console.error('Delete failed:', error.message);
         alert('Failed to delete item. Please try again.');
      } finally {
         setLoading(false);
      }
   };

   return (
      <>
         <button onClick={() => setIsOpen(true)} className="delete-btn">
            Delete
         </button>
         {isOpen && (
            <div className="modal-overlay">
               <div className="modal">
                  <h3>Confirm Deletion</h3>
                  <p>Are you sure you want to delete "{itemName}"?</p>
                  <div className="modal-actions">
                     <button 
                        onClick={handleDelete} 
                        disabled={loading}
                        className="confirm-btn"
                     >
                        {loading ? 'Deleting...' : 'Yes, Delete'}
                     </button>
                     <button 
                        onClick={() => setIsOpen(false)}
                        className="cancel-btn"
                     >
                        Cancel
                     </button>
                  </div>
               </div>
            </div>
         )}
      </>
   );
};

export default DeleteConfirmationModal;

Comparison

Best Practices

• Error Handling ? Always wrap DELETE requests in try-catch blocks

• User Feedback ? Show loading states and confirmation dialogs

• State Updates ? Update your React state after successful deletion

• Authorization ? Include authentication headers when required

Conclusion

Axios provides flexible methods for sending DELETE requests in React applications. Use axios.delete() for simple operations and the configuration approach for complex scenarios. Always implement proper error handling and user feedback for better user experience.