[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.state.result.map')]

Question

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.state.result.map')]. I am getting this error whenever i am trying to fetch the data from the api. And also below in code i have used val.Global where Global is the title under which there is all the data. Can anyone tell what's the problem in my code?

import React from 'react';
import {View, Text, ActivityIndicator, StyleSheet, FlatList} from 'react-native';



export class mainScreen extends React.Component{
  
    constructor(props){
        super(props);
        this.state = {
            isloading: true,
            result: []
        }
    }
    componentDidMount(){
     return fetch('https://api.covid19api.com/summary')
      .then((response) => response.json())
      .then((responseJson) => {
          this.setState({
              isloading: false,
              result: responseJson.covid
          })
      })
    }
   
    render(){
        if(this.state.isloading){
            return (
                <View style={styles.container}>
                <ActivityIndicator/>
                </View>
            )
        }else{
        let covid = this.state.result.map((val, key) => {
        return <View key={key} style={styles.item}><Text>{val.Global}</Text></View>
        });
       return(
        <View style={styles.container}>
        {covid}
       </View>
        );
    }
  }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    item: {
        flex: 1,
        alignSelf: 'stretch',
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center'
    }
  });

Answer 1

Your API call returns this:

{
    "Global": {
        "NewConfirmed": 214569,
        "TotalConfirmed": 14506757,
        "NewDeaths": 4029,
        "TotalDeaths": 606157,
        "NewRecovered": 104134,
        "TotalRecovered": 8149310
    },
    "Countries": [
        {
                "Country": "Afghanistan",
                "CountryCode": "AF",
                "Slug": "afghanistan",
                "NewConfirmed": 174,
                "TotalConfirmed": 35475,
                "NewDeaths": 17,
                "TotalDeaths": 1181,
                "NewRecovered": 361,
                "TotalRecovered": 23634,
                "Date": "2020-07-20T13:49:18Z",
                "Premium": {}
            },
...

And in your component, you're trying to retrieve the "covid" field, which doesn't exist... You need to save your API data like this:

this.setState({
    isloading: false,
    result: responseJson
})

And change your render this way:

render() {
    const { loading, result } = this.state; 

    if (loading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator/>
            </View>
        );
    }

    //If you want to show total recovered for global
    return (<View key={key} style={styles.item}><Text>{val.Global.TotalRecovered}</Text></View>);

   //If you want to show global recovered for each country
   const covid = result.Countries.map(country => (<View key={key} style={styles.item}><Text>{country.TotalRecovered}</Text></View>));

   return (
        <View style={styles.container}>
            {covid}
        </View>
   );
}

The error is caught up because you are trying to go through a table that doesn't exist.

Answer 2

I was working on a similar project. Guess this should suffice

const covid = result.Countries.map((country, key) => {
            return (<View key={key} style={styles.item}><Text>{country.TotalRecovered}</Text></View>);
        })

    return (
                <View style={styles.container}>{name}</View>
            )

Guess this should suffice!