How do I direct the link to the anchor and close the modal at the same time?

Asked

Viewed 110 times

1

I have some links in a modal made in React that go to anchors of the page that the modal was opened. I am using href for the anchor and the onClick event to close the modal. Example:

<a onClick={props.onHide} href="#denuncias">

However, one cancels the other. When I have the event, the anchor does not work, when I take the onClick, the anchor works, but the modal does not close.

Modal programming:

const MyOwnModal = (props) => {
return (
    <Modal
    {...props}
    size="lg"
    dialogClassName="modal-90w"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton>
      <Modal.Title id="contained-modal-title-vcenter">
        POLITICA DE PRIVACIDADE
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>

Programming of onHide:

<MyOwnModal
            show={modalShow}
            onHide={() => {
              if(window.location.hash){
                setModalShow(false);
            }}}
          />

Previously, I had not added this if on onHide. I added it searching for information on the internet, but it didn’t help much. With it, the modal only closes by directing to the anchor the first time.

Anyone can help?

1 answer

0

If you are using directly the window.location (not always common in a React app), you can navigate to an anchor using directly

window.location = '#some-hash'

The modal can receive a onSectionSelected, which closes the modal and returns a Section/hash to then navigate.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.