How to map two different data values from api in react js - reactjs

Question

I am following https://github.com/adrianhajdin/project_corona_tracker
https://www.youtube.com/watch?v=khJlrj3Y6Ls
So in this project the following api is used-
https://covid19.mathdro.id/api/daily
here I am getting covid cases values for each day. I need to display the number of cases that increased from yesterday to today
so I am trying to get values of current date confirmed cases(total cases)- yesterday's date confirmed cases
this is my card.jsx file:
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 Info = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return "Loading...";
}
return (
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.infected)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Infected
</Typography>
<Typography variant="h5" component="h2">
<div>
---------------> total cases-yesterday's cases
</div>
<CountUp
start={0}
end={confirmed.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of active cases of COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.recovered)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Recovered
</Typography>
<Typography variant="h5" component="h2">
<div>
{(
(Number(recovered.value) / Number(confirmed.value)) *
100
).toFixed(2)}{" "}
%
</div>
<CountUp
start={0}
end={recovered.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of recoveries from COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.deaths)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Deaths
</Typography>
<Typography variant="h5" component="h2">
<div>
{(
(Number(deaths.value) / Number(confirmed.value)) *
100
).toFixed(2)}{" "}
%
</div>
<CountUp
start={0}
end={deaths.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of deaths caused by COVID-19.
</Typography>
</CardContent>
</Grid>
</Grid>
</div>
);
};
export default Info;

Answer 1

Here's one way to extract that data:
fetch('https://covid19.mathdro.id/api/daily', {
method: 'GET'
}).then(res => res.json()).then(d => {
let todayData = d[d.length - 1];
let yesterdayData = d[d.length - 2];
console.log({
todayData
});
console.log({
yesterdayData
});
// minus total confirmed today - yesterday
const todayTotalDiff = todayData.totalConfirmed - yesterdayData.totalConfirmed;
console.log(`minus total confirmed today - yesterday = ${todayTotalDiff}`);
});