I need to open two seperate Material UI dialogs (Terms & Privacy) from their parent ponent which is a material UI 'simple menu'. I have them imported and nested in the parent already, I just don't know how to get them to open from their parent while being seperate files. I played around with this similar question for way too long but couldn't get it working. Thanks.
Parent ponent (Menu):
import React from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Terms from './Terms';
import Privacy from './Privacy'
const More = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="more"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
edge='end'
>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Terms of Use</MenuItem>
<MenuItem onClick={handleClose}>Privacy Policy</MenuItem>
</Menu>
<Terms />
<Privacy />
</div>
);
}
export default More;
Child ponent 1 ('Terms' dialog):
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
const Terms = () => {
const [openTerms, setOpen] = React.useState(false);
const openTermsDialog = () => {
setOpen(true);
};
const handleCloseTerms = () => {
setOpen(false);
};
return (
<Dialog
open={openTerms}
onClose={handleCloseTerms}
aria-labelledby="terms-dialog-title"
aria-describedby="terms-dialog-description"
>
<DialogTitle id="terms-dialog-title">{"Terms of Use"}</DialogTitle>
<DialogContent>
<DialogContentText id="terms-dialog-description">
Terms go here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseTerms} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Terms;
Child ponent 2 ('Privacy' dialog):
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
const Privacy = () => {
const [openPrivacy, setOpen] = React.useState(false);
const handleOpenPrivacy = () => {
setOpen(true);
};
const handleClosePrivacy = () => {
setOpen(false);
};
return (
<Dialog
open={openPrivacy}
onClose={handleClosePrivacy}
aria-labelledby="privacy-dialog-title"
aria-describedby="privacy-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Privacy Policy"}</DialogTitle>
<DialogContent>
<DialogContentText id="privacy-dialog-description">
Privacy policy goes here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClosePrivacy} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Privacy;
I need to open two seperate Material UI dialogs (Terms & Privacy) from their parent ponent which is a material UI 'simple menu'. I have them imported and nested in the parent already, I just don't know how to get them to open from their parent while being seperate files. I played around with this similar question for way too long but couldn't get it working. Thanks.
Parent ponent (Menu):
import React from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Terms from './Terms';
import Privacy from './Privacy'
const More = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="more"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
edge='end'
>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Terms of Use</MenuItem>
<MenuItem onClick={handleClose}>Privacy Policy</MenuItem>
</Menu>
<Terms />
<Privacy />
</div>
);
}
export default More;
Child ponent 1 ('Terms' dialog):
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
const Terms = () => {
const [openTerms, setOpen] = React.useState(false);
const openTermsDialog = () => {
setOpen(true);
};
const handleCloseTerms = () => {
setOpen(false);
};
return (
<Dialog
open={openTerms}
onClose={handleCloseTerms}
aria-labelledby="terms-dialog-title"
aria-describedby="terms-dialog-description"
>
<DialogTitle id="terms-dialog-title">{"Terms of Use"}</DialogTitle>
<DialogContent>
<DialogContentText id="terms-dialog-description">
Terms go here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseTerms} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Terms;
Child ponent 2 ('Privacy' dialog):
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
const Privacy = () => {
const [openPrivacy, setOpen] = React.useState(false);
const handleOpenPrivacy = () => {
setOpen(true);
};
const handleClosePrivacy = () => {
setOpen(false);
};
return (
<Dialog
open={openPrivacy}
onClose={handleClosePrivacy}
aria-labelledby="privacy-dialog-title"
aria-describedby="privacy-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Privacy Policy"}</DialogTitle>
<DialogContent>
<DialogContentText id="privacy-dialog-description">
Privacy policy goes here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClosePrivacy} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Privacy;
1 Answer
Reset to default 7Just lift up the state from the dialog ponents to the parent ponent, and pass it down to the child ponents.
const More = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const [openDialogName, setOpenDialog] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const openTermsDialog = () => {
setOpenDialog('TERMS');
handleClose();
};
const openPrivacyDialog = () => {
setOpenDialog('PRIVACY');
handleClose();
};
const closeDialog = () => {
setOpenDialog(null);
};
return (
<div>
{/* ... */}
<MenuItem onClick={openTermsDialog}>Terms of Use</MenuItem>
<MenuItem onClick={openPrivacyDialog}>Privacy Policy</MenuItem>
{/* ... */}
<Terms open={openDialogName === 'TERMS'} onClose={closeDialog} />
<Privacy open={openDialogName === 'PRIVACY'} onClose={closeDialog} />
</div>
);
}
export default More;
And in Privacy for example (and the same idea for Terms as well):
const Privacy = ({ open, onClose }) => {
return (
<Dialog
open={open}
onClose={onClose}
>
{/* ... */}
);
};