Passing a custom component to material ui dialog that opens it - html

Question

I am trying to pass a custom component to a MUI Dialog in such way that it should open the Dialog itself and render its children.
const CustomDialog = ({children, someCustomComponent}) => {
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return(
<>
{someCustomComponent} // use this component to call handleOpen/handleClose
<Dialog>
<DialogTitle>
<DialogTItle>
<DialogContent>{children}</DialogContent>
<DialogActions>...</DialogActions>
</Dialog>
</>
);
}
CustomDialog.propTypes = {
someCustomComponent: PropTypes.node.isRequired,
}
And then call it like this
<CustomDialog someCustomComponent={<h1>open</h1>}>
{myDialogContent}
</CustomDialog>
Is this possible? So, essentially, I don't always want a button to open my Dialog. I want to have any component I pass to it to be able to open it.
This is kind of how this is done by using Button
return(
<>
<Button onClick={handleClickOpen} />
<Dialog>
...
but I want to pass any element to it.
Thanks!

Answer 1

A simple way to do it is with React.cloneElement
const CustomDialog = ({ children, someCustomComponent }) => {
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
// clone the component and add the onClick handler
const customComponentClone = React.cloneElement(someCustomComponent, {
onClick: handleClickOpen
});
return (
<>
{customComponentClone}
<Dialog>
<DialogTitle>
<DialogTItle>
<DialogContent>{children}</DialogContent>
<DialogActions>...</DialogActions>
</Dialog>
</>
);
}
This way you can use it like you mentioned
<CustomDialog someCustomComponent={<h1>open</h1>}>
{myDialogContent}
</CustomDialog>
Check here a live version