How to call REST API in Ionic 5 React App | Axios REST API Example

Hello All, In the last topic we had discussed How to generate windows build using electron. Now, In this Ionic react tutorial, We will discuss How to call REST API in the Ionic 5 React application with example.

How to Create Ionic React Project?

Before creating a new project, Install the latest Ionic CLI using the following command

npm install -g ionic/cli

Now, Its time to create a new Ionic react project

ionic start ionicReact blank --type=react

Now, using ionic serve command we can able to run our new Ionic react application in the browser.

How to call a REST API In Ionic React application using Axios

Now, We need to add axios dependency before proceeding.

Install axios using the following command

npm install axios --save

import following things in HomePage.tsx

import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonAvatar, IonImg, IonLabel, IonList, IonPage
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import axios from 'axios';

Now, take a constant for listItems as follows

const [ listItems, setListItems ] = useState<any>([]);

It’s time to create a new function that communicates with the server.

const sendRequest = () => {
return axios
    .get('https://dummyapi.io/data/v1/user',{
     headers:{
              'app-id':'<YOUR_APP_ID>',
              'Content-Type' : 'application/json'
},
})
.then((response) => {
console.log(response);
return response.data;
})
};

Now, We will call sendRequest() function as follows

React.useEffect(() => {
sendRequest().then(data => {
        setListItems(data.data)
});
}, []);

We got the response, Will show this data in list format as follows.

return (
<IonPage>
  <IonHeader>
    <IonToolbar color="primary">
    <IonTitle> List </IonTitle>
    </IonToolbar>
  </IonHeader>
<IonContent>
     <IonList color="primary">
         {
           listItems.map((item :any) => {

            return (
            <IonItem key={ item['id'] }>
             <IonAvatar slot="start">
               <IonImg src={ item['picture'] } </IonImg>
              </IonAvatar>
              <IonLabel>
                   <h3> { item['firstName'] } { item['lastName'] } </h3>
              </IonLabel>
            </IonItem>
             );
         })
      }
 </IonList>
</IonContent>
</IonPage>
);

Full Source Code :

import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonAvatar, IonImg, IonLabel, IonList, IonPage
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import axios from 'axios';

const HomePage: React.FC = () => {


const [ listItems, setListItems ] = useState<any>([]);



React.useEffect(() => {
sendRequest().then(data => {
        setListItems(data.data)
});
}, []);



const sendRequest = () => {
return axios
    .get('https://dummyapi.io/data/v1/user',{
     headers:{
              'app-id':'<YOUR_APP_ID>',
              'Content-Type' : 'application/json'
},
})
.then((response) => {
console.log(response);
return response.data;
})
};


return (
<IonPage>
  <IonHeader>
    <IonToolbar color="primary">
    <IonTitle> List </IonTitle>
    </IonToolbar>
  </IonHeader>
<IonContent>
     <IonList color="primary">
         {
           listItems.map((item :any) => {

            return (
            <IonItem key={ item['id'] }>
             <IonAvatar slot="start">
               <IonImg src={ item['picture'] } </IonImg>
              </IonAvatar>
              <IonLabel>
                   <h3> { item['firstName'] } { item['lastName'] } </h3>
              </IonLabel>
            </IonItem>
             );
         })
      }
 </IonList>
</IonContent>
</IonPage>
);





}

export default HomePage;

This is how we can able to call the REST API in the Ionic React application.