Making sure users don’t accidentally delete data is an important safeguard for most web applications. This React tutorial will show you how to create a reusable delete confirmation modal using React, React Bootstrap, and React Font Awesome.
React Bootstrap Font Awesome

Here’s a quick overview of the user experience we’ll be creating.

  1. A user clicks on a trash icon adjacent to the record they want to delete.
  2. The user is presented with a modal asking them to confirm the deletion.
  3. If the user clicks delete, the deletion is performed and the modal disappears. A success alert is presented to the user.
  4. If the user clicks cancel, the deletion is cancelled and the modal disappears.
This tutorial is meant to act as a general guide. Implementation details will likely vary based on your React application.

Prerequisites

Although not required, this tutorial implements React Bootstrap and Font Awesome. If you want to match the user interface and component mark-up below, you’ll need to install these two libraries.

React Bootstrap

https://react-bootstrap.github.io/

React Font Awesome

https://fontawesome.com/how-to-use/on-the-web/using-with/react

Creating the Reusable React Delete Confirmation Modal

We’ll start by creating our delete confirmation modal component. The goal is to create a reusable React component, which allows us to implement our delete confirmation functionality anywhere in the application. Our new React component requires specific properties that we’ll review in a bit.

First, create a new component in your project called DeleteConfirmation.

Here’s what our component looks like in action.

React Delete Confirmation Modal
Here’s a list of properties we’ll be passing into our new DeleteConfirmation component:
  • showModal This Boolean property simply instructs our modal to show or hide itself.
  • hideModal This property is a function that is passed in from the parent. This function is called when the user cancels their deletion.
  • confirmModal This property is a function that is passed in from the parent. This function is called when the user confirms their deletion.
  • id This is the id or key of the record being deleted.
  • type This is the type of record being deleted. This property isn’t crucial, but it allows use to the same functions within the parent component. Otherwise, we’d need to create a separate display modal and submit function for each record type. We’d also need to add a DeleteConfirmation component for each list.
  • message This is the message displayed within the modal.

Implementing Delete Confirmation In Parent Component

Next, I’ll show you how to implement the DeleteConfirmation component within a parent component. I’m going to implement two separate types of records that share the same confirmation functions. This is why the type property in the DeleteConfirmation component is important.

For the sake of this tutorial, I’m creating two lists named Fruits and Vegetables within the local state of the parent component. In a real-world scenario, I’d expect you’d be pulling data and deleting the record using an API.

Here’s what our parent control looks like when displayed within a browser.

React Delete Confirmation Modal

Here’s the React code for our parent component.

Let’s review the parent component.

  • Start by importing the necessary libraries, including React Bootstrap and React Font Awesome.
  • Set up the local state we’re going to need for our implementation.
  • Next, create the functions we’re going to use for displaying, hiding, and submitting the deletions. The functions used for setting the modal’s behavior and modifying records will always reside within the parent. Having the logic exist within the parent allows us to customize the functions to reuse our confirmation modal in different cases and for different objects.
  • Within the component’s return, I’m displaying our Fruits and Vegetables lists and wiring up the Font Awesome trash icon next to each item. Upon click, the showDeleteModal function is triggered.
  • Once triggered, the showDeleteModal function will set the correct message for the selected item and display the Bootstrap modal by setting displayConfirmationModal to true.

Once the deletion is completed, we display a success alert above the correct record type.

React Parent Component Delete Confirmed

There You Have It! No More Accidental Deletions

Your React application now ensures users cannot easily, accidentally delete records.

Again, this tutorial was meant to act as high-level guide. Implementation details will most likely differ based on the specifics of your React application.

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Aditya Patel
Aditya Patel
7 months ago

Nice write up. I was curious how to display bootstrap modals in React.

Phil Resoti
Phil Resoti
6 months ago

Finally a clearly written, accurate write up. Thanks for taking the time to pass along your knowledge.

Mark Harrison
Mark Harrison
6 months ago

React is cool. Thank you for the solid explanation.

Web Dude
Web Dude
5 months ago

You good instructor. Is source code on github?

web
mobile
desktop
cloud
Get in touch! We would love to discuss your next software project.
4
0
Would love your thoughts, please comment.x
()
x