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?

javascript html react modal anchorage

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 javascript html react modal anchorage

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