How to save values from api as a number REACT js - reactjs

Question

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;

Answer 1

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;