I 'useIonAlert' show an alert and in button handler show a new alert, but will not show the new alert, Something is wrong?

Ionic Framework Ionic React
1

I am a newbie to Ionic, I geted a question today. It’s like this topic’s title.

the code like this:

  const [showAlert] = useIonAlert();

  return (
        <IonButton
          onClick={() => {
            showAlert('Alert1', [
              {
                text: 'in button handler show new alert (no response)',
                handler: () => {
                  // !!! this new alert will not show !!!
                  showAlert('Inside Alert2');
                }
              }
            ]);
          }}
        >
          Show Alert (error)
        </IonButton>
);

And live sample in this CodeSandBox

(Sorry, English is not my native language, Forgive my wording)

2

You have to import useState,IonAlert and useIonAlert first

import {useIonAlert,IonAlert} from '@ionic/react';
import {useState} from 'react';

then useState and set its value to false, this is how we will be able to show the alert mesage

const [showAlert,setAlert] = useState(false);

on button click set showAlert to true

<IonButton onClick={() => { setAlert(true)}>show alert</IonButton>

now create ionalert and add all the details.

<IonAlert
      isOpen={showAlert}
      header={`Alert Message`}
      message={in button handler show new alert (no response)}
      buttons={[
         {
          text:'OK',
          role:'redirect',
          handler: redirect=>{
            setAlert(false);
          }
        }
        ]}
        
      />
1 Like