ionic react refresher

pull down to trigger refresh

data is updated

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal, IonRefresher, IonRefresherContent,
  IonTextarea,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'

const Tab1: React.FC = () => {
  const [data, setdata] = useState<string>('data')

  let doRefresh = (event: CustomEvent<RefresherEventDetail>) => {
    axios({
      method: 'get',
      url: 'https://api.exchangeratesapi.io/latest?base=CAD',
    })
      .then(response => {
        setdata(JSON.stringify(response.data.rates))
        event.detail.complete();
      })
      .catch(function (error) {
        alert(error);
        doRefresh(event)
      })
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Refresher Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        {/*-- Default Refresher --*/}
        <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
          <IonRefresherContent></IonRefresherContent>
        </IonRefresher>

        <IonList>
          <IonItemDivider>pull down to refresh</IonItemDivider>
          <IonItem>
            <IonTextarea
              rows={10}
              readonly
              value={data}>
            </IonTextarea>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

reference:
https://www.tutorialsteacher.com/typescript/arrow-function