How to close an IonPopover in Ionic/React?

Question

I'm using Ionic version 6.10.1 to build an app. Precisely, I'm using ionic with react syntax.

In my app, I wanted to use a popover component. It works perfectly, the popover is shown and I can do something with it but I can only close it when I click outside and not from a button. Basically, I integrated two buttons in my popover. A cancel and okay buttons. I want to close my popover when I click okay or cancel but I couldn't do that.

The example in the docs have a close button already and it works when I click it. However, the source code is written in JavaScript and somehow it looks like alien language. I didn't understand literally nothing.

I noticed there are also other examples with ionic/angular but I have no idea about Angular. In fact I started learning React this week so I'm a beginner.

Basically, what I want is a minimal example in Ionic/React which shows how can this be done.

Answer 1

I didn't use ionic with react but this might help you.

dismissPopOver(bool){  // make seperate dismiss function
    setShowPopover(bool);
}
    return (
        <>
          <IonPopover
            isOpen={showPopover}
            cssClass='my-custom-class'
            onDidDismiss={e => setShowPopover(false)}
          >
            <p onClick={()=> dismissPopOver(false)}>Click your Content to dismiss popover</p>

          </IonPopover>
          <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
        </>
      );

Answer 2

I managed to solve the problem. It was not because of react or ionic are designed. It was a stupid typo from me.

I used the popover component inside a sliding component like this

<IonItemSliding>
    <IonItemOptions side="start">
      <IonItemOption onClick={(e) => setShowPopover(true)}>Favorite
      <IonPopover backdropDismiss 
    keyboardClose
    showBackdrop
    isOpen={showPopover}
    onDidDismiss={e => setShowPopover(false)}>
<p>Select Priority and Time To Live</p>
    <IonButton onClick={() => setShowPopover(false)}>dismiss</IonButton>
    </IonPopover>
     </IonItemOption>
    </IonItemOptions>

    <IonItem>
      <IonLabel>Item Options</IonLabel>
    </IonItem>

    <IonItemOptions side="end">
      <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>
    </IonItemOptions>
  </IonItemSliding> 

Notice how the popover is inside the ItemOption which is wrong. Just move the popover after the ItemOption solved my problem