How to close a IonItemSliding through React?

Hi! I’ve been trying to close a IonItemSliding through the React api but until now i haven’t got it working

<IonItemSliding>
      <IonItem routerLink={link}>
        <IonLabel>
          {props.name}
        </IonLabel>
      </IonItem>
      <IonItemOptions side="end">
          <IonItemOption
            onClick={event => {
              addToFavorites(props);
            }}
          >
            <IonIcon slot="start" icon={heart}></IonIcon>Favorite
          </IonItemOption>
      </IonItemOptions>
    </IonItemSliding>

When i click the option the code to add the favorites runs but i haven’t been able to access the sliding item.

I’ve tried:

event.target.something()
event.currentTarget.something()

But i can’t seem to find its reference

Thanks!

See this topic here: Ionic 4 + React: How Can I close an IonItemSliding?

I think that’s what you’re looking for.

  1. Set an id to your IonItemSliding element.
  2. Send the id as parameter on your onClick function.
<IonItemSliding id="my-sliding">
    <IonItemOptions side="end">
        <IonItemOption color="danger" onClick={ e => handleClick( "my-sliding" ) }>
            <IonIcon slot="icon-only" icon={ trash } size="small" />
            <IonLabel>Eliminar</IonLabel>
        </IonItemOption>
    </IonItemOptions>
</IonItemSliding>
  1. In your function. Find your element with the id and call the close function.
function handleClick( slidingId ) {
    document.getElementById( slidingId ).close(); 
}
  1. Be happy :smiley: