How do I pass the handler function deleteHandler() to the child component <DeleteDialogModal>? I am passing the handler function from the parent page component because the deleteHandler() will be different for different pages.
In src/app/dashboard/article/[id]/page.tsx

export default function Page({ params }) {
  function deleteHandler() {
    alert("Hi");
  }

  return (
    <>
      <div className="...">
        <h3>ID - {params.id}</h3>
        <DeleteDialogModal editUrl={`.../${params.id}/edit`} deleteHandler={deleteHandler}>
          ...
        </DeleteDialogModal>
      </div>
    </>
  );
}

In src/components/DeleteDialogModal.tsx

"use client";
export default function DeleteDialogModal({ editUrl, deleteHandler, children }) {
  return (
    <>
      <Dialog>
        <div className="...">
          <Button asChild>
            <Link href={editUrl}>Edit</Link>
          </Button>
          <DialogTrigger asChild>
            <Button onClick={() => deleteHandler}>Delete</Button>
          </DialogTrigger>
        </div>
        <DialogContent>
          {children}
        </DialogContent>
      </Dialog>
    </>
  );
}

Thanks for reading