Adding a Delete Confirmation to your React App

I just had a ton of fun adding this minor feature to my React app DinoFinder2020, which was my final project for Flatiron School.

I’d never been totally thrilled with this app. Although it was my final project, I rushed it a bit in order to graduate on time and it never became as polished as I would have liked. It is a graphical wiki for cataloguing prehistoric animals. But it’s a fun idea and I really wanted it to look good so I have been making some cosmetic tweaks over the past few weeks.

When I Googled ‘add delete confirmation to react app’ nothing that really met my need or clearly explained how simple this is came up. I started following instructions in one of the guides but their use case was so much more complex than mine it really wasn’t making any sense. So I took a few steps back and started over, then I realized how unbelievably easy this is just by utilizing some react-bootstrap and passing around some props.

So I created a new component file, DeleteConfirm.js, in my src\components folder. This component would be my popup to confirm if you really want to delete the entry. React-bootstrap has a Modal component which suits this purpose very well. So you’re going to want to add your imports to the top of your new component as follows:

import React from 'react';
import { Modal, Button } from "react-bootstrap";

I have a third import, deleteButton, but we’ll get to that in a moment. Once you’ve got your imports down you want to design your modal. The react-bootstrap docs explain this really well. You could even just copy and paste their example code, although you’ll be making some tweaks to it starting with the first few lines:

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

These are hooks and they’re probably better off in a parent component. Why? Well for me it was because the button that would actually trigger the modal was part of another component, and that button needs to access these. So I made the DeleteConfirm component a child of DinosaurCard.

Using that as a parent will also allow you to pass some useful info down to DeleteConfirm and of course to modify your original delete button so that it no longer makes a change to the database, it just triggers the confirmation modal. Don’t forget, if you are using a functional component for your parent as I am, you need to import the useState hook:

import { useState } from "react";

So I did that and passed my new child some props:

<DeleteConfirm 
showModal={show} 
handleClose = {handleClose} 
handleDelete = {props.handleDelete} 
dinosaur={props.dinosaur} 
handleDelete = {props.handleDelete} 
/>

You’ll recognize the first three from the earlier code snippet — those are now part of DinosaurCard’s state and being passed down to Modal as props. Assuming you copied the example from react-bootstrap, you’re going to have to let the Modal know that these are now props so instead of:

<Modal show={show} onHide={handleClose}>

You’ll now have:

<Modal show={props.showModal} onHide={props.handleClose}>

And so on for every other instance of show and handleClose. Don’t forget to actually place the new component into the parent component’s return statement.

With this all done, you should now be able to click a button in your parent component and trigger the child modal component exactly as it’s shown in the react-bootstrap example. This is what I mean by this being simple — I literally just used the example code and broke it up into two components so they can interact with each other. But… that’s all we’ve got now is a modal that doesn’t do anything. How do you get it to actually delete the record? This is where the handleDelete prop comes in. That function was actually in my app before I implemented this modal, it’s the function that physically deletes the record from the database. I had it in my higher order DinosaurContainer component and that’s where I left it. Initially I had it being passed down to DinosaurCard then down again to DeleteButton, a functional component that does just one thing, deletes a record. It’s arguable if you really need a component for this, it could just be part of the parent component DinosaurCard. But I like to keep things flexible so I made it its own component. And that component still did what I needed it to do, triggers that handleDelete function and deletes a record. So instead of using that component (which deleted a record immediately without warning) within DinosaurCard, I put it in DeleteConfirm.

So, the delete button on DinosaurCard now triggers the modal, which asks you if you’re sure you’d like to delete. Then the modal (DeleteConfirm) presents you with the original delete button component, which you can click to confirm you want it deleted.

roar?

Basically I repurposed my original delete button component and changed the delete button in the card to trigger a modal instead of an immediate deletion. Easy peasy!

I know this turned into a bit of a project specific rant so I’m going to try to summarize this below:

1. Create your new git branch (optional but recommended)
2. Create a new functional component. Copy and paste the example code from the live demo on this page into your new component.
3. Cut all local state-related code out of the component and paste it into whatever component will present the initial delete button (the button that triggers the modal). Remember to import useState if it’s a functional component.
4. Replace your original initial delete button with a simple button that only triggers the modal. Make sure its onClick = {handleShow}. But save the code for your original button, you’ll need it in a couple steps.
5. Add your new component with the modal to your parent component, passing as props show, handleClose, and whatever other data your modal will need. At this point you should be able to click your initial delete button and have the new component pop up.
6. This guide assumes you already have the delete functionality in place. Take whatever button you were using to delete the record before and insert it into the new modal component. I replaced the ‘click here to save’ button from the example with my DeleteButton functional component but you could even just leave that, change the text to ‘confirm delete’ and add your actual delete function to its onClick. As long as you’re making one of the buttons in the modal trigger your delete function, you’re golden.
7. Commit your code and merge back to master. That is it!

Unfortunately this isn’t a one size fits all approach and you’ll have to tweak these instructions to your particular implementation, but I hope I’ve kept it generic enough that if anyone like me who just wants a simple confirmation message to pop up before wiping out one of your records in React can follow these steps and make that happen.

Thanks for reading and happy coding!