react-modal invoke on link click

Question

using react-modal, need to show the modal on click of the hyperlink either through anchor tag or react-router-dom Link

example: click on register hyperlink and register form modal should open

handleClick() =>{
 <ReactModal/>
}
<table>
<tr>
<td>
<a href='' onclick='handleClick()'>check</>
</td>
</tr>
</table>

is there a way to do that?

@Samathingamajig I'm new to frontend & react and searched online, checked other stuff to resolve the issue before posting it here but couldn't find a solution. kndly do remove the downvote — Sumanth, Nov 19 '20 at 04:06

score 2 · Accepted Answer · answered Nov 18 '20 at 02:39

You can define onClick event handler for link. On the handler you can use preventDefault to stop navigating to the linked url. Please check below example.

const [modalVisible, setModalVisible] = useState(false);

<a
  href="https://github.com"
  onClick={(event) => {
    event.preventDefault();
    setModalVisible(true);
  }}
>
  Github
</a>

<Modal
  isOpen={modalVisible}
>
  ...
</Modal>

react-modal invoke on link click

1 Answers1