I have a ready popup. But I only want it to open when I click on the "Send my policy to my email address" item in the menu. How can I do it?
<AS.Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button',
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
{[
'View PDF', // Menu item
'Send my policy to my email address', // Menu item
'Cancel my policy', // Menu item
].map((option) => (
<AS.MenuItem key={option} onClick={handleClose}>
{option}
</AS.MenuItem>
))}
</AS.Menu>
One of the options would be to pass the clicked option to the handleClose method, something like the below:
<AS.Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button',
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
{[
'View PDF', // Menu item
'Send my policy to my email address', // Menu item
'Cancel my policy', // Menu item
].map((option) => (
<AS.MenuItem key={option} onClick={() => handleClose(option)}>
{option}
</AS.MenuItem>
))}
</AS.Menu>
Then, In the handleClose method you can validate whether the clicked option was the one you want:
const handleClose = (option) => {
if (option === 'Send my policy to my email address') showPopup();
}