`<IonItemSliding>` `onIonDrag` event handler `this` example

IonItemSlidingBack.js

import {
    IonItemSliding,
  } from '@ionic/react';

type IonItemSlidingBackProps = {
  children?: React.ReactNode;
};

const IonItemSlidingBack: React.FC<IonItemSlidingBackProps> = ({ children }) => {
  return (
    <IonItemSliding onIonDrag={(e) => {
        if (e.detail.ratio >= 1) {
          console.log('threshold');
          return;
        }
        this.close(); // this is always `undefined`, not `<IonItemSliding>` as one would expect
      }}
    >
      {children}
    </IonItemSliding>
  );
};

export default IonItemSlidingBack;

usage.js

<IonItemSlidingBack>
  <IonItemOptions>
	<IonItemOption color="danger" onClick={() => alert('call delete method here')} expandable>
	  Delete
	</IonItemOption>
  </IonItemOptions>

  <IonItem detail={false}>
	<IonLabel className="ion-text-wrap">Test</IonLabel>
  </IonItem>
</IonItemSlidingBack>