How can I pass a function to the child component?-CodePudding

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;

CodePudding user response：

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>
  );
};

CodePudding user response：

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();
    };
// ...

CodePudding user response：

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;