javascript - How to trigger modalpopup on page first load - React - Stack Overflow

When user enters the page I would like to have a modal pops up as the first thing with option to choose between USER and AGENT and based on that the content of the page will be updated.

At first, I need to figure out how to trigger the modal on page load and save the chosen option to cookie / localStorage.

I know there is a JavaScript function, something like this:

$(document).ready(function() {
  setTimeout(function() {
    $("#myModal").modal('show');
  }, 2000);

});

The code ^ above will trigger the modal when user is on page for 2 seconds, I would like to achieve the same logic just with react - thinking of useEffect could handle that ?

Also, I am using React Bootstrap, I know that ponent has some functions e.g onEnter function, but I am not sure if it is usable at all ?

React Modal I am using now that is triggered by button:

const [show, setShow] = useState(false); // trigger

        <Button variant="primary" onClick={() => setShow(true)}>
            Custom Width Modal
        </Button>

Modal itself:

            <Modal
                show={show}
                onHide={() => setShow(false)}
                dialogClassName="modal-90w"
                aria-labelledby="contained-modal-title-vcenter"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Lorem Ipsum Dolor
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row className="text-center justify-content-center">
                        <Col>
                            <Button>USER</Button>
                        </Col>
                        <Col>
                            <Button>AGENT</Button>
                        </Col>
                    </Row>
                </Modal.Body>
            </Modal>

When user enters the page I would like to have a modal pops up as the first thing with option to choose between USER and AGENT and based on that the content of the page will be updated.

At first, I need to figure out how to trigger the modal on page load and save the chosen option to cookie / localStorage.

I know there is a JavaScript function, something like this:

$(document).ready(function() {
  setTimeout(function() {
    $("#myModal").modal('show');
  }, 2000);

});

The code ^ above will trigger the modal when user is on page for 2 seconds, I would like to achieve the same logic just with react - thinking of useEffect could handle that ?

Also, I am using React Bootstrap, I know that ponent has some functions e.g onEnter function, but I am not sure if it is usable at all ?

React Modal I am using now that is triggered by button:

const [show, setShow] = useState(false); // trigger

        <Button variant="primary" onClick={() => setShow(true)}>
            Custom Width Modal
        </Button>

Modal itself:

            <Modal
                show={show}
                onHide={() => setShow(false)}
                dialogClassName="modal-90w"
                aria-labelledby="contained-modal-title-vcenter"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Lorem Ipsum Dolor
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row className="text-center justify-content-center">
                        <Col>
                            <Button>USER</Button>
                        </Col>
                        <Col>
                            <Button>AGENT</Button>
                        </Col>
                    </Row>
                </Modal.Body>
            </Modal>

• javascript
• reactjs
• function
• bootstrap-modal

Share Follow edited Apr 27, 2021 at 14:50 asked Apr 27, 2021 at 14:38 user15603995user15603995 2

• You should not be using jquery with react. Post the ponent that you want this to take place in – Udendu Abasili Commented Apr 27, 2021 at 14:46
• I updated my post with the current modal I am having @UdenduAbasili – user15603995 Commented Apr 27, 2021 at 14:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Since you say you want the popup to show first you simple need to change this

const [show, setShow] = useState(true)

Try this

useEffect() with a second argument as an empty list will only be called once, when the ponent is mounted. You can also check the cookie just before calling setShow.

The below code also adds a delay of 2 seconds.

useEffect(()=>{
  setTimeout(()=>{
    setShow(true)
  }, 2000)
}, [])