I have this component with a modal for confirmation when deleting an item. How can I pass the function to the child component so that once I click the button Agree, it will trigger this function for delete.
The function to delete an item:
const deleteProduct = async (id) => {
const productDoc = doc(db, "products", id);
await deleteDoc(productDoc);
};
The Dialog:
<Modal
title="Confirmation"
subtitle={sample}
isOpen={isOpen}
handleClose={handleClose}
/>
The Reusable component:
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;
Update the reusable component to accept an onConfirm prop and pass deleteProduct in as that argument. I've changed handleClose to onClose here for consistency.
<Modal
title="Confirmation"
subtitle={sample}
isOpen={isOpen}
onClose={handleClose}
onConfirm={() => deleteProduct(id)}
/>
// ...
const Modal = ({ title, subtitle, children, isOpen, onClose, onConfirm }) => {
const handleConfirm = () => {
alert("You Agreed!");
onConfirm();
onClose();
};
// ...
Simply pass the function and productId as props to Modaland because the function is asynchronous, you have to make the handleConfirm asynchronous as well.
The Dialog:
<Modal
productId={id}
title="Confirmation"
subtitle={sample}
isOpen={isOpen}
deleteProductCallback={deleteProduct}
handleClose={handleClose}
/>
The Reusable component:
import {
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Button,
DialogActions,
} from "@mui/material";
const Modal = ({ productId,title, subtitle, children, isOpen, handleClose ,deleteProductCallback}) => {
const handleConfirm = async() => {
alert("You Agreed!");
await deleteProductCallback(productId);
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>
);
};
You can pass the deleteProduct function and the id as props to the Modal Components like bellow:
The Dialog:
<Modal
title="Confirmation"
subtitle={sample}
isOpen={isOpen}
id={id}
handleClose={handleClose}
deleteProduct={deleteProduct}
/>
The Reusable component:
import {
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Button,
DialogActions,
} from "@mui/material";
const Modal = ({ title, subtitle, children, isOpen, id, handleClose, deleteProduct }) => {
const handleConfirm = () => {
alert("You Agreed!");
handleClose();
deleteProduct(id)
};
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;