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

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;

So your Info component needs confirmedToday and confirmedYesterday, but you are passing in a whole data object which I'm guessing is a single response from the API. Do you have yesterday's data too? I don't understand what you're having trouble with. — JMadelaine
– JMadelaine, Commented Apr 23, 2020 at 21:25
no, I am not able to get yesterday's data from the api, the api has data for all the dates, idk how to extract — rawrstar
– rawrstar, Commented Apr 23, 2020 at 21:30
deltaConfirmed is the difference confirmed over the last 24 hours. That's probably what you need. — JMadelaine
– JMadelaine, Commented Apr 23, 2020 at 21:35
will only get value for Global like that and not each individual country — rawrstar
– rawrstar, Commented Apr 23, 2020 at 21:41

Raz Chiriac · Accepted Answer · 2020-04-23 21:58:30Z

2

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}`);
});

edited Apr 23, 2020 at 21:58

answered Apr 23, 2020 at 21:47

Raz Chiriac

4162 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

rawrstar Over a year ago

yea, but how would i minus total confirmed today - yesterday

rawrstar Over a year ago

yes that works :D can you please tell me how to display it in my jsx file(given in the question)

Raz Chiriac Over a year ago

Yeah, what props are you passing to Info ? Are you passing the whole array? It would help if you can post a CodeSandbox of your project

Raz Chiriac Over a year ago

codesandbox.io/s/happy-einstein-pw6kc note: the delta is not country specific.

Raz Chiriac Over a year ago

Here's a private chat in case you have further questions.].

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related