Creating a Confirm Dialog in React and Material UI

There comes a time in every application where you want to delete something. So like every developer, you add a button, that when clicked on, deletes the resource.

Wether it’s a blog post, a shopping cart item, or disabling an account, you want to protect against unwanted button clicks.

Enter the Confirm Dialog.

Sometimes you do want to execute an action without always prompting the user with a confirm dialog, and sometimes it can be annoying always prompting them.

Hey, do you want to do this? No, really, do you really want to do this?

Sometimes, I get annoyed and tell myself, and the application. Yes! Of course I want to do the action. Why else would I have clicked on it?

However, when it comes to deleting sensitive data, such as a blog post, I would suggest adding a confirm dialog, so the user can be alerted and can back out if they accidentally clicked on it by mistake.

Before we begin, let’s look at how to achieve this is native JavaScript.

var shouldDelete = confirm(
  "Do you really want to delete this awesome article?"
);

if (shouldDelete) {
  deleteArticle();
}

This will prompt a default confirm box, and prompt the user with the text, “Do you really want to delete this awesome article?”

If the user clicks Yes, then it will set the shouldDelete boolean to true and run the deleteArticle function. If they click No, or Cancel, it will close the dialog.

But the native browser implementation of the confirm dialog is kind of boring, so let’s make a version, that looks good, with React and Material UI.

Let’s begin by creating a reusable component. You can use this in any application that uses React and Material UI.

import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";

const ConfirmDialog = (props) => {
  const { title, children, open, setOpen, onConfirm } = props;
  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      aria-labelledby="confirm-dialog"
    >
      <DialogTitle id="confirm-dialog">{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button
          variant="contained"
          onClick={() => setOpen(false)}
          color="secondary"
        >
          No
        </Button>
        <Button
          variant="contained"
          onClick={() => {
            setOpen(false);
            onConfirm();
          }}
          color="default"
        >
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmDialog;

This component will take in these props:

1. title — This is what will show as the dialog title

2. children — This is what will show in the dialog content. This can be a string, or it can be another, more complex component.

3. open — This is what tells the dialog to show.

4. setOpen — This is a state function that will set the state of the dialog to show or close.

5. onConfirm — This is a callback function when the user clicks Yes.

This is just a basic confirm dialog, you can modify it to meet your needs, such as changing the Yes or No buttons.

Now let’s see how we can use this component in our application.

As an example, let’s say we have a table that lists blog posts. We want a function to run when we click a delete icon, that will show this confirm dialog, and when we click Yes, it will run a deletePost function.

<div>
  <IconButton aria-label="delete" onClick={() => setConfirmOpen(true)}>
    <DeleteIcon />
  </IconButton>
  <ConfirmDialog
    title="Delete Post?"
    open={confirmOpen}
    setOpen={setConfirmOpen}
    onConfirm={deletePost}
  >
    Are you sure you want to delete this post?
  </ConfirmDialog>
</div>

In this component, we need to implement the ConfirmDialog with the props open, setOpen, and onConfirm. Open and setOpen are controlled by using a React state, and onConfirm takes in a function called deletePost, which calls an API to delete this certain post. Implementing these are beyond the scope of this article. I will leave it up to to implement what those functions actually do.

There you have it! Pretty easy to create a reusable confirm dialog, and it looks a million times better than the default native browser dialog.