REACT- MUI - Dialog Box - Sample for confirmation of Delete Record. - Send Response value from Child Component to Parent

REACT- MUI - Dialog Box - Sample for confirmation of Delete Record. 

Sample code also demonstrate how to send value from child component to parent component 

// This method will be triggered on response from dialog box

const ConfirmBoxHandleResponse = (ResponseValue) => {
    if (ResponseValue === true) {
      DeleteData();
    }
  };
 

// State variable to handle visibility of Dialog box

 const [ShowConfirmationValue, SetShowConfirmationValue] = useState(false);

const ShowConfirmation = () => {

    SetShowConfirmationValue(true);
  };

 

// Button to trigger dialog box – for delete
 <Button
                variant="outlined"
                startIcon={<DeleteIcon />}
                onClick={(e) => ShowConfirmation()}
              >
                Delete
              </Button>

  

// JSX For Dialog box
 <div>
        {ShowConfirmationValue ? (
          <DeleteConfirmBox onResponse={ConfirmBoxHandleResponse} />
        ) : null}
      </div>
 

New Component for Delete confirmation – Dialog box

 

import {useEffect, useState} from "react";
import { Button } from '@mui/material';
import DeleteIcon from "@mui/icons-material/Delete";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
 

const DeleteConfirmBox = (props) => {

 const [ShowConfirmationValue, SetShowConfirmationValue] = useState(true);

const CloseShowConfirmation = () => {
    SetShowConfirmationValue(false);
  };
 

const ShowConfirmation = () => {
    SetShowConfirmationValue(true);
  };

 

useEffect(() =>{
    ShowConfirmation();   
  },[])

  
  const ResponseFromDialog = (Value) =>{
    props.onResponse(Value);   
    return Value;
  }

 return (

    <div>
      <Dialog onClose={CloseShowConfirmation} open={ShowConfirmationValue}>
        <DialogTitle id="alert-dialog-title">{"Delete Record"}</DialogTitle>
 
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Are you sure you want to delete the record ?
          </DialogContentText>
        </DialogContent>
 
        <DialogActions>
          <Button
            variant="outlined"
            startIcon={<DeleteIcon />}
            onClick={(e) => {
              //DeleteData(e);
              ResponseFromDialog(true);
              CloseShowConfirmation();
            }}
          >
            Confirm
          </Button>
          <Button
            variant="outlined"
            onClick={() => {
                ResponseFromDialog(false);
                CloseShowConfirmation();             
            }}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default DeleteConfirmBox;

 

NOTE  :  ConfirmBoxHandleResponse Works as Callback from Child component which is passed as Props.