Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Popup opening when you click on the text in the menu

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>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading