title: How to trigger modal/popup on page first load - React
body: <p>When user enters the page I would like to have a modal pops up as the first thing with option to choose between <strong>USER</strong> and <strong>AGENT</strong> and based on that the content of the page will be updated.</p>
  <p>At first, I need to figure out how to trigger the modal on page load and save the chosen option to cookie / localStorage.</p>
  <p>I know there is a JavaScript function, something like this:</p>
  <pre><code>$(document).ready(function() {
    setTimeout(function() {
      $(&quot;#myModal&quot;).modal('show');
    }, 2000);
  
  });
  </code></pre>
  <p>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 <code>useEffect</code> could handle that ?</p>
  <p>Also, I am using React Bootstrap, I know that  component has some functions e.g <code>onEnter</code> function, but I am not sure if it is usable at all ?</p>
  <p>React Modal I am using now that is triggered by button:</p>
  <pre><code>const [show, setShow] = useState(false); // trigger
  
          &lt;Button variant=&quot;primary&quot; onClick={() =&gt; setShow(true)}&gt;
              Custom Width Modal
          &lt;/Button&gt;
  </code></pre>
  <p>Modal itself:</p>
  <pre><code>            &lt;Modal
                  show={show}
                  onHide={() =&gt; setShow(false)}
                  dialogClassName=&quot;modal-90w&quot;
                  aria-labelledby=&quot;contained-modal-title-vcenter&quot;
              &gt;
                  &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title id=&quot;contained-modal-title-vcenter&quot;&gt;
                          Lorem Ipsum Dolor
                      &lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      &lt;Row className=&quot;text-center justify-content-center&quot;&gt;
                          &lt;Col&gt;
                              &lt;Button&gt;USER&lt;/Button&gt;
                          &lt;/Col&gt;
                          &lt;Col&gt;
                              &lt;Button&gt;AGENT&lt;/Button&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                  &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
  </code></pre>