Building a Confirmation Dialog Component with React and Material-UI

Introduction:

Confirmation Dialogs are a crucial UI component in many applications. They prompt users to confirm or cancel actions that have significant consequences. In this blog post, we will explore how to create a reusable Confirmation Dialog component using React and Material-UI. We will dive into the code and explain its functionality, as well as demonstrate how to use the component in your React applications.

Code

import { useState } from "react";
import {
  Dialog,
  Button,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
} from "@material-ui/core";

function ConfirmationDialog(props) {
  //local states
  const [open, setOpen] = useState(false);

  const showDialog = () => {
    setOpen(true);
  };

  const hideDialog = () => {
    setOpen(false);
  };

  const confirmRequest = () => {
    props.response();
    hideDialog();
  };

  return (
    <>
      {props.children(showDialog)}
      {open && (
        <Dialog
          open={open}
          onClose={hideDialog}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              {props.description}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={confirmRequest} color="primary">
              Yes
            </Button>
            <Button onClick={hideDialog} color="primary">
              No
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

export default ConfirmationDialog;

Example usage:

import ConfirmationDialog from './ConfirmationDialog';

function MyComponent() {
  const handleConfirmation = () => {
    // Perform action upon confirmation
    console.log('Confirmed!');
  };

  return (
    <ConfirmationDialog
      title="Confirmation"
      description="Are you sure you want to proceed?"
      response={handleConfirmation}
    >
      {(showDialog) => (
        <button onClick={showDialog}>Open Confirmation Dialog</button>
      )}
    </ConfirmationDialog>
  );
}

export default MyComponent;

In the above example, we import the ConfirmationDialog component and use it within the MyComponent component. When the user clicks the "Open Confirmation Dialog" button, the Confirmation Dialog will appear with the provided title and description. Upon confirming, the handleConfirmation function will be executed.