Material-UI Dialog Reusable Component Not Working but no error in the console and app does not crash

Question

This is my reusable component:

import {
  Dialog,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  Button,
  DialogActions,
} from "@mui/material";

const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
  return (
    <Dialog open={isOpen} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{subtitle}</DialogContentText>
        <Divider />
        {children}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="error">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default Modal;

Parent component where I use this here:

const [isOpen, setisOpen] = useState(false);
  const [isOpenDialog, setIsOpenDialog] = useState(false);

  const handleDialogOpen = () => {
    setisOpen(true);
  };

  const handleDialogClose = () => {
    setisOpen(false);
  };

  const handleOpen = () => {
    setIsOpenDialog(true);
  };

  const handleClose = () => {
    setIsOpenDialog(false);
  };

 <Modal
        title="confirmation"
        isOpen={isOpen}
        children={sample}
        handleClose={handleDialogClose}
      />


         <Button
              color="error"
              onClick={
                () => handleDialogOpen}
            >
              Delete
            </Button>

It does not show any error in the console and the app does not crash. How can I fix this? Also how can I add a button where the user can say yes since at the moment the modal only have a buttin to close it

Answer 1

There's a lot to unpack here. Here's a solution:

import {
 Dialog,
 DialogContent,
 DialogContentText,
 DialogTitle,
 Divider,
 Button,
 DialogActions
} from "@mui/material";

const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
const handleConfirm = () => {
  alert("You Agreed!");
  handleClose();
};
 return (
   <Dialog open={isOpen} onClose={handleClose}>
    <DialogTitle>{title}</DialogTitle>
     <DialogContent>
      <DialogContentText>{subtitle}</DialogContentText>
       <Divider />
        {children}
       </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="error">
          Cancel
        </Button>
        <Button onClick={handleConfirm} color="primary">
          Agree
        </Button>
      </DialogActions>
   </Dialog>
  );
};

export default Modal;

Here's the parent:

import Modal from "./modal";
import { useState } from "react";
import { Button } from "@mui/material";

export default function App() {
 const [isOpen, setisOpen] = useState(false);

 const handleOpen = () => {
  setisOpen(true);
 };

 const handleClose = () => {
  setisOpen(false);
 };
   return (
     <div className="App">
     <Modal title="confirmation" isOpen={isOpen} handleClose={handleClose} />
     <Button color="primary" onClick={handleOpen}>
       I Agree
     </Button>
    </div>
 );
}

Here's the sandbox: