Opening Material UI Modal from a parent within a parent - reactjs

Question

I have a table with a list of teams; the last column in each row opens up a menu, and I want the menu items to open up a modal or a dialog, depending on the item. I want to keep the table, menu, and modal as separate components. So it looks like this:
Teams.tsx
const testDataTeams = [
{ name: 'Cincinatti Bengals', owner: 'John Person', created: '11/11/11', members: 4 },
{ name: 'Los Angeles Rams', owner: 'John Person', created: '11/11/11', members: 3 },
{ name: 'The A-Team', owner: 'John Person', created: '11/11/11', members: 2 },
]
export default function Teams() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [openModal, setOpen] = React.useState(null);
const open = Boolean(anchorEl);
const moreOptions = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const clickModal = Boolean(openModal)
const closeModal = () => {
setOpen(null)
};
return (
<TableContainer component={Paper}>
<Table sx={{ display: { xs: 'none', md: 'table', lg: 'table' }, minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Name</StyledTableCell>
<StyledTableCell align="right">Owner</StyledTableCell>
<StyledTableCell align="right">Date Created</StyledTableCell>
<StyledTableCell align="right">Members</StyledTableCell>
<StyledTableCell align="right"></StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{testDataTeams.map((item) => (
<StyledTableRow key={item.name}>
<StyledTableCell component="th" scope="row">{item.name}</StyledTableCell>
<StyledTableCell align="right">{item.owner}</StyledTableCell>
<StyledTableCell align="right">{item.created}</StyledTableCell>
<StyledTableCell align="right">{item.members}</StyledTableCell>
<StyledTableCell align="right">
<IconButton
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={moreOptions}>
<MoreIcon />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<TeamMenu clickModal={clickModal} closeModal={closeModal} />
</Menu>
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
TeamMenu.tsx
export default function TeamMenu(clickModal, closeModal) {
return (
<div>
<MenuItem>
<ListItemIcon>
<NotificationsIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Notification Settings</ListItemText>
</MenuItem>
<MenuItem onClick={closeModal}>
<ListItemIcon>
<EditIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Edit Team Info</ListItemText>
</MenuItem>
<TeamsModal open={clickModal} handleClose={closeModal} />
<MenuItem>
<ListItemIcon>
<GroupIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Edit Members</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<DeleteIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Delete Team</ListItemText>
</MenuItem>
</div>
);
}
TeamsModal.tsx
const TeamsModal = ({ open, handleClose }) => {
return (
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box>
<Typography id="modal-modal-title" variant="h6" component="h2">
Text in a modal
</Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</Typography>
</Box>
</Modal>
)
}
export default TeamsModal;
I can get props to pass to the Team Menu, but I'm having trouble getting it down another level, and I'm worried I've made my code too convoluted. What would be the best way to execute this?

Answer 1

You can pass a callback function to the TeamsMenu component like you are doing here, but it doesn't look like you are returning the actual TeamsModal component in the Teams component.
You want to have the TeamsModal in the Teams component like so:
const testDataTeams = [
{ name: 'Cincinatti Bengals', owner: 'John Person', created: '11/11/11', members: 4 },
{ name: 'Los Angeles Rams', owner: 'John Person', created: '11/11/11', members: 3 },
{ name: 'The A-Team', owner: 'John Person', created: '11/11/11', members: 2 },
]
export default function Teams() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [openModal, setOpen] = React.useState<boolean>(false);
const open = Boolean(anchorEl);
const moreOptions = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const clickModal = () => setOpen(true);
const closeModal = () => setOpen(false);
return (
<>
<TableContainer component={Paper}>
<Table sx={{ display: { xs: 'none', md: 'table', lg: 'table' }, minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Name</StyledTableCell>
<StyledTableCell align="right">Owner</StyledTableCell>
<StyledTableCell align="right">Date Created</StyledTableCell>
<StyledTableCell align="right">Members</StyledTableCell>
<StyledTableCell align="right"></StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{testDataTeams.map((item) => (
<StyledTableRow key={item.name}>
<StyledTableCell component="th" scope="row">{item.name}</StyledTableCell>
<StyledTableCell align="right">{item.owner}</StyledTableCell>
<StyledTableCell align="right">{item.created}</StyledTableCell>
<StyledTableCell align="right">{item.members}</StyledTableCell>
<StyledTableCell align="right">
<IconButton
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={moreOptions}>
<MoreIcon />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<TeamMenu clickModal={clickModal} closeModal={closeModal} />
</Menu>
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{openModal && (
<TeamsModal open={openModal} handleClose={() => setOpen(false)} />
)}
</>
);
}
Notice that I defined the state type for open as boolean instead of using null.
This ensures the modal will open when the openModal state is set to true.
Also, if you are using Typescript I recommend you define types for components and props to ensure you aren't making silly mistakes and have that sweet autocomplete capability.