Why 1 value from API doesn't not save?

Question

API this one https://covid19.mathdro.id/api

Sorry for interrupt, but I freaking out with this issue, almost 2 hours im thinking what the problem. So, for recored and for confirmed it works fine, but for deaths I have this issue:

Issue photo

import React from 'react';
import {Card, CardContent, Typography, Grid} from '@material-ui/core';
import CountUp from 'react-countup';
import cx from 'classnames';

import styles from './Cards.module.css'

const Cards = ({data: {deaths, confirmed, recovered, lastUpdate } } )  => {
    if(!confirmed) {
        return 'Loading...'
    };

    return (
        <div className={styles.container}>
            <Grid container spacing={3} justify="center">
                <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.infected)}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Infected</Typography>
                        <Typography variant="h5">
                            <CountUp
                            start={0}
                            end={confirmed.value}
                            duration={2.5}
                            separator=","
                            /> 
                        </Typography>
                        <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
                        <Typography variant="body2">Number of active cases</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recovered)}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Recovered</Typography>
                        <Typography variant="h5">
                            <CountUp
                            start={0}
                            end={recovered.value}
                            duration={2.5}
                            separator=","
                            /> 
                        </Typography>
                        <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
                        <Typography variant="body2">Number of recoveries from COVID-19</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.deaths)}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Deaths</Typography>
                        <Typography variant="h5">
                            <CountUp
                            start={0}
                            end={deaths.value}
                            duration={2.5}
                            separator=","
                            /> 
                        </Typography>
                        <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
                        <Typography variant="body2">Number of deaths caused by COVID-19</Typography>
                    </CardContent>
                </Grid>
            </Grid>
        </div>
    )
}

export default Cards;

this is my app.js

import React from 'react';


import { Cards, Chart, CountryPicker } from './components';
import styles from './App.module.css';
import { fetchData } from './api';

class App extends React.Component {
    state = {
        data: {},
    }

    async componentDidMount() {
        const fetchedData = await fetchData();

        this.setState({ data: fetchedData });
    }

    render() {
        const {data} = this.state;

        return (
            <div className={styles.container}>
                <Cards data={data}/>
                <Chart />
                <CountryPicker />
            </div>
        )
    }
}

export default App;

So, I'm try without deaths and it works, but with not.

index.js

import axios from 'axios';

const url = 'https://covid19.mathdro.id/api';

export const fetchData = async () => {
    try {
        const { data: { confirmed, recovered, death, lastUpdate } } = await axios.get(url);

        return {confirmed, recovered, death, lastUpdate};
    } catch (error) {

    }

}

Thanks for helping me out!

Answer 1

You have missed a "s" (it is deaths not death, according to the API) in your fetch data function.

Update your this part

data: { confirmed, recovered, death, lastUpdate } } = await axios.get(url);

to

data: { confirmed, recovered, deaths, lastUpdate } } = await axios.get(url);

:D