Popup opening when you click on the text in the menu-CodePudding

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>

CodePudding user response：

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();
}