how to open modal popup on app load using ionic react

Question

i am using ionic-react and want to launch a modal popup when app is launched. The idea is to create a login popup when app starts. i will dismiss it if user is already logged in else user will login.

my current issue is how to open it automatically?

the way to open using button is known to me for code like below

 <IonModal isOpen={loginModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setLoginModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setLoginModal(true)}>Show Modal</IonButton>

but i don't need button.

question from:https://stackoverflow.com/questions/66059495/how-to-open-modal-popup-on-app-load-using-ionic-react

Answer 1

It opens automatically based on your isOpen which you have set to loginModal. When that is set to true, the modal will be opened. You should use a variable for that.

const [showModal, setShowModal] = useState(true);

...

return(
  <IonModal isOpen={showModal} cssClass='my-custom-class'>
  ...
  </IonModal>
)

edit: fixed typo brackets