Tengo este componente con un modal para confirmación al eliminar un elemento. ¿Cómo puedo pasar la función al componente secundario para que una vez que haga clic en el botón Agree , active esta función para eliminar?
La función para eliminar un elemento:
const deleteProduct = async (id) => { const productDoc = doc(db, "products", id); await deleteDoc(productDoc); };El diálogo:
<Modal title="Confirmation" subtitle={sample} isOpen={isOpen} handleClose={handleClose} />El componente reutilizable:
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;Actualice el componente reutilizable para aceptar una propiedad onConfirm y pase deleteProduct como ese argumento. Cambié handleClose a onClose aquí para mantener la coherencia.
<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(); }; // ...Simplemente pase la función y el productId de producto como accesorios a Modal y, dado que la función es asíncrona, también debe hacer que handleConfirm asíncrono.
El diálogo:
<Modal productId={id} title="Confirmation" subtitle={sample} isOpen={isOpen} deleteProductCallback={deleteProduct} handleClose={handleClose} />El componente reutilizable:
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> ); };Puede pasar la función deleteProduct y la identificación como accesorios a los componentes modales como se muestra a continuación:
El diálogo:
<Modal title="Confirmation" subtitle={sample} isOpen={isOpen} id={id} handleClose={handleClose} deleteProduct={deleteProduct} />El componente reutilizable:
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;