ionic react prompt

//tab2.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
  IonReorder, IonReorderGroup, IonSlide, IonSlides,
  IonTabBar, IonTabs, IonTabButton, IonBadge,
  IonRouterOutlet
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  calendar, personCircle, map,
  informationCircle
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';

const Tab2: React.FC = () => {
  const { Modals } = Plugins;
  const [prompt, setPrompt] = useState<string>('')
  const [prompt2, setPrompt2] = useState<string>('')

  const showConfirm = async () => {
    let confirmRet = await Modals.confirm({
      title: 'Confirm',
      message: 'Are you sure you\'d like to press the red button?'
    });
    setPrompt(JSON.stringify(confirmRet))
  }

  const showPrompt = async () => {
    let promptRet = await Modals.prompt({
      title: 'Hello',
      message: 'What\'s your name?'
    });
    let promptRet2 = await Modals.prompt({
      title: 'Hello',
      message: 'How are you?'
    });
    setPrompt(JSON.stringify(promptRet))
    setPrompt2(JSON.stringify(promptRet2))
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Modal Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem >
            <IonButton onClick={() => showConfirm()}>confirm</IonButton>
            <IonButton onClick={() => showPrompt()}>prompt</IonButton>
          </IonItem>
          <IonItem>
            {prompt}
          </IonItem>
          <IonItem>
            {prompt2}
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

reference:

https://capacitor.ionicframework.com/docs/apis/modals#type-779