1

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 component 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>
2
  • You should not be using jquery with react. Post the component that you want this to take place in Apr 27, 2021 at 14:46
  • I updated my post with the current modal I am having @UdenduAbasili
    – user15603995
    Apr 27, 2021 at 14:50

2 Answers 2

2

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

const [show, setShow] = useState(true)
5
  • That's correct! Although this will be true for entering whatever page - I would like to use it only when the index page is loaded for the first time to user and after choosing an option (agent or user) it will be stored in cookie/localStorage so modal won't show up anymore even on index page, unless the storage is clear again
    – user15603995
    Apr 27, 2021 at 14:56
  • so you want this to only open once and not to come up again if the storage current has the option chosen? Apr 27, 2021 at 14:59
  • Exactly that's what I would like to achieve.
    – user15603995
    Apr 27, 2021 at 15:00
  • How many pages do you have currently? Is the modal on the main page with all of them linked? Apr 27, 2021 at 15:02
  • It was my fault - I added the modal to App.js - now I moved it only to Index page, so it is triggered only on index, but if I go to other page and come back to index, modal is triggered again
    – user15603995
    Apr 27, 2021 at 15:04
1

Try this

useEffect() with a second argument as an empty list will only be called once, when the component 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)
}, [])
8
  • Thank you @Ajith, but it has the same result as the post above you I commented.
    – user15603995
    Apr 27, 2021 at 14:59
  • Have you revered the changes you made in last answer? Otherwise, the default is already true and this will make no change.
    – Ajith Gopi
    Apr 27, 2021 at 15:00
  • When I tried your solution I setup my state for false
    – user15603995
    Apr 27, 2021 at 15:02
  • As I mentioned, you need to set the cookie additionally and check if it's set before calling setShow. Call the function only if cookie not set.
    – Ajith Gopi
    Apr 27, 2021 at 15:03
  • Here's how to set and retrieve cookies stackoverflow.com/a/43684059/5321660
    – Ajith Gopi
    Apr 27, 2021 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy