javascriptreactjshyperlinkreact-router-domreact-modal

react-modal invoke on link click

Using react-modal, I need to show the modal on click of the hyperlink either through an 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?

Solution

  • 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>