Where are SQL Jobs Stored?

Javascript only loads when I refresh the page in React

Gonzales

I have a widget I'm using from a software provider (Mindbody) it has a script tag to load a purchase widget you can embed into your webpage. I'm using create-react-app to create a simple page with a modal and the button of the link but for some reason the page doesn't load on initial visit. You have to refresh the page and then the page will load. Any guidance? Is there a function I can call that initiates the javscript once the window is loaded for react?

I should also note a I am using react-router-dom to route to the web page that won't load until refresh

  const Widget = () => {
return(
 <div>
  <healcode-widget data-version="0.2" data-link-class="healcode-pricing-option- 
   text-link" data-site-id="30089" data-mb-site-id="686934" data-bw-identity- 
   site="false" data-type="pricing-link" data-inner-html="Purchase now" data- 
   service-id="101165" />
 </div>
)

}

useEffect(() => {
    Widget();
  }, []);

Routing to this page

    import * as React from 'react';
import { Stack, Box, Typography, Modal, Backdrop } from '@mui/material';
import ButtonV2 from './ButtonV2';
import { useEffect } from 'react';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  boxShadow: 24,
  borderRadius: 3,
  transition: "5s ease-in-out"
};

const PurchaseLanding = () => {

    const [show, setShow] = React.useState(true);
    const handleClose = () => setShow(false);


  return (
    <div>
        <Modal
        open={show}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        disableAutoFocus="true" 
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}>
            
        <Box sx={style}>
            <div>
                {/* full width image */}
            <img style={{borderRadius: "10px 10px 0 0"}} src="https://res.cloudinary.com/djjb1vyjm/image/upload/v1660541084/1_uxhi8p.png" width="100%" alt="" />
            </div>
            <Box p={2}>
                {/* title */}
            <Typography align="center" id="modal-modal-title" variant="h5" component="h2">
            <span className='space-font-heavy'>Buy your [10-pack]</span>
            </Typography>

            {/*  onboarding message */}
            <Stack pb={3} alignItems="center" justifyContent="center" direction="row" spacing={2}>
                <Typography px={1} align="center" id="modal-modal-description" sx={{ mt: 2 }}>
                    <span className='space-font-light'>Once completed download the Mindbody app to add, update, and book your workouts!</span>
                </Typography>
            </Stack>

            {/* button group left/right */}
            
            <Stack direction="row" justifyContent="center" alignItems="center">
              <Link m={2} className='button-27'><div className='links'><healcode-widget data-version="0.2" data-link-class="healcode-pricing-option-text-link" data-site-id="30089" data-mb-site-id="686934" data-bw-identity-site="false" data-type="pricing-link" data-inner-html="Purchase now" data-service-id="101165" /></div></Link>

            </Stack>

            </Box>
        </Box>
        </Modal>

    </div>
  );
}


export default PurchaseLanding