Hello everyone
i’m student who is new to Ionic framework and Typescript, i’m following this tutorial to complete the project How I Created a Coronavirus Tracker App in Just 3 Days with Ionic and Firebase everything worked but the there is one error " TypeError: Cannot read property ‘map’ of undefined "
any help is appreciated, thank you for reading
here is my code
type or paste code hereimport React, { useState, useEffect } from 'react';
import { IonContent, IonHeader, IonPage, IonToolbar, IonRow, IonCol, IonImg, IonLoading, IonList, IonItem, IonCard, IonGrid } from '@ionic/react';
import moment from 'moment';
import axios from 'axios';
import './NewsTab.css';
interface INewsResponse {
status: string;
totalResults: number;
articles: Array<IArticles>;
}
interface IArticles {
author: string;
title: string;
description: string;
url: string;
image: string;
published: string;
category: [];
}
const NewsTab: React.FC = () => {
const [data, setData] = useState<IArticles[]>([]);
const [showLoading, setShowLoading] = useState(true);
useEffect(() => {
const getNewsData = async () => {
// Changed News API from newsapi.org to currentsapi due to developer account's limits
const result = await axios('https://newsapi.org/v2/everything?q=Covid19&language=vi&apiKey=5675babc5d2344fe96756c025d1b6f1d');
// console.log(result);
setData(result.data.news);
setShowLoading(false);
};
getNewsData();
}, []);
function trimSourceDetails(source: string): string {
return (source ? (source.split(' ')[1] ? source.split(' ')[0] + ' ' + source.split(' ')[1] : source.split(' ')[0]) : source);
}
function showImageIfExists(imageUrl: string): any {
if (imageUrl !== 'None') {
return <IonImg src={imageUrl} class="newsImage" ></IonImg>
} else {
return <IonImg src="assets/images/ImageNotAvailable.png" class="newsImageNA" ></IonImg>
}
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonRow>
<IonCol><IonImg class="appIcon" src="assets/icon/coronatracker_favicon.png" alt="WorldIcon"></IonImg></IonCol>
<IonCol class="appTitle">Corona Tracker</IonCol>
<IonCol class="appDate">{moment().format('MMMM Do')}</IonCol>
</IonRow>
</IonToolbar>
</IonHeader>
<IonContent>
<IonLoading isOpen={showLoading} onDidDismiss={() => setShowLoading(false)} message={'Fetching latest news for you...'} />
<IonRow>
<IonCol class="pageTitle">Related News Bulletins</IonCol>
</IonRow>
<IonList>
{data.map((news, idx) => (
<IonItem key={idx}>
<IonCard>
<IonGrid>
<IonRow class="newsTitle">{news?.title}</IonRow>
<IonRow class="newsSource">
<IonCol>{news?.category}</IonCol>
<IonCol>{trimSourceDetails(news?.author)}</IonCol>
<IonCol text-right>{moment(news?.published).format('DD MMM YYYY')}</IonCol>
</IonRow>
<IonRow >{showImageIfExists(news.image)}</IonRow>
<IonRow class="newsContent">{news?.description}</IonRow>
</IonGrid>
</IonCard>
</IonItem>
))}
</IonList>
</IonContent>
<IonRow>
<IonCol class="pageTitle">#StayAlertedStaySafe</IonCol>
</IonRow>
</IonPage>
);
};
export default NewsTab;```