CODEWITHSUNDEEP
reactjs
rawrstar
rawrstar

Reputation: 165

How to save values from api as a number REACT js

This is the api I am using https://covid19.mathdro.id/api

I need to take the {recovered.value} and divide it by {confirmed.value} and then multiply the result by 100 to get the recovery percentage. But these values are coming as string and not number//

this is the 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">
              <CountUp
                start={0}
                end={confirmed.value}
                duration={2.75}
                separator=","
              />
              <div>
                {recovered.value}/{confirmed.value}
              </div>
            </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">
              <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">
              <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;

and I have tried parseInt, in this part of code,for confirmed, but it does not woke

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

this is my app.js

import React from "react";

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

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

  componentWillUpdate() {
    console.log("hello");
  }
  async componentDidMount() {
    const data = await fetchData();
    this.setState({ data });
    console.log("data");
  }

  handleCountryChange = async (country) => {
    const data = await fetchData(country);
    this.setState({ data, country: country });
    console.log("data");
  };

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

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

export default App;

Upvotes: 1

Views: 387

Answers (1)

Khabir
Khabir

Reputation: 5854

You have bug on your code. I tried to fixed it and able to run it. Please check the update code here:

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

const useStyles = makeStyles(theme => ({
    container: {},
    infected: {},
    recovered: {},
    deaths: {}
}));

const Info = ({data: {confirmed, recovered, deaths, lastUpdate}}) => {
    const styles = useStyles();

    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">
                            <CountUp
                                start={0}
                                end={confirmed.value}
                                duration={2.75}
                                separator=","
                            />
                            <div>
                                {recovered.value}/{confirmed.value}
                            </div>
                        </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">
                            <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">
                            <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;

You should should use Info Component in your app component like below:

import React from 'react';
import Info from "./Info";

class App extends React.Component {

    render() {
        let data = {
            confirmed: {value: 245550},
            recovered: {value: 4555},
            deaths: {value: 4534},
            lastUpdate: Date.now()
        };
        return (
            <Info data={data}/>
        )
    }
}
export default App;

Upvotes: 1

Related Questions