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:


const HomePage = ({ data }) => {

  const { t } = useTranslation();

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

  }, []);

  return (



const Modal = (props) => {

return (

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


export default Modal

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

Any clue? Thank you.

Read more here:

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: