Showing a popup after 3 seconds from page load in GatsbyJS (ReactJS) using the hook useEffect()

I have a Gatsby JS based website and I am trying to achieve the loading of a modal/popup after 3 seconds after the index page has loaded.

Here is my code so far:

index.js

const HomePage = ({ data }) => {

  const { t } = useTranslation();

  useEffect(() => {
    setTimeout(() => <Modal
    component={<FormA />}
   />, 3000);

  }, []);

  return (

     <Layout>
       ...
     </Layout>
  )
}

modal.js

const Modal = (props) => {

return (

    <div className='modal'>
        <div className="modal-background"></div>
        <div className="modal-content">{props.component}</div>
    </div>

  )
}

export default Modal

No error is detected, but the modal does not show up.

Any clue? Thank you.



Read more here: https://stackoverflow.com/questions/67937594/showing-a-popup-after-3-seconds-from-page-load-in-gatsbyjs-reactjs-using-the-h

Content Attribution

This content was originally published by Giulia at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: