Value in countUp and even in typography not updating - reactjs

Question

I'm trying to modify the proyect of { https://www.youtube.com/watch?v=khJlrj3Y6Ls&t=3311s } to my country, so, instead of having countries displayed in the option box and selecting one for updating the value of the cards, I'm trying to achieve to update the numbers when selecting a region, one by one... The options and region names are done.
But, when selecting a region the number is not updating and just displays zero, even is receiving the correct data in JSON (and even passing a number it just desplays zero).
I'm sorry if I'm a bit ambiguous but I'm newbie in React. How I can achieve this?, it just displays zero... And I have a lot of hours trying to resolve this.
Thanks and also, the 99% of the work is from the tutorial of JavaScript Mastery.
There's the code.
import axios from 'axios';
const url = 'https://covid19.mathdro.id/api/countries/CHILE';
export const fetchData = async (provincia) => {
let changeableUrl = url;
if (provincia) {
changeableUrl = `${url}/confirmed`;
try {
const {
data: [
confirmed,
recovered,
deaths,
lastUpdate,
]
} = await axios.get(changeableUrl);
return {
confirmed,
recovered,
deaths,
lastUpdate,
};
} catch (error) {
return error;
}
} else {
try {
const {
data: {
confirmed,
recovered,
deaths,
lastUpdate,
}
} = await axios.get(changeableUrl);
return {
confirmed,
recovered,
deaths,
lastUpdate,
};
} catch (error) {
return error;
}
}
};
export const fetchDailyData = async () => {
try {
const {
data
} = await axios.get(`${url}`);
return data.map(({
confirmed,
deaths,
reportDate: date
}) => ({
confirmed: confirmed.total,
deaths: deaths.total,
date
}));
} catch (error) {
return error;
}
};
export const fetchCountries = async () => {
try {
const {data: provincias } = await axios.get(`${url}/confirmed`);
return provincias.map((provincia) => provincia.provinceState);
} catch (error) {
return error;
}
};
There's the APP.js
import React from 'react';
// import Cards from './components/Cards/Cards.jsx';
// import Chart from './components/Chart/Chart.jsx';
// import CountryPicker from './components/CountryPicker/CountryPicker.jsx';
import {Cards, Chart, CountryPicker} from './components';
import styles from './App.module.css';
import { fetchData} from './api';
// Acá se agrega el componente
class App extends React.Component {
state = {
data: {},
provincia: '',
}
async componentDidMount(){
const fetchedData = await fetchData();
this.setState({ data: fetchedData })
}
handleCountryChange = async (provincia) => {
const fetchedData = await fetchData(provincia);
console.log(fetchedData)
this.setState({ data: fetchedData, provincia: provincia })
}
render() {
const { data, provincia} = this.state;
return (
<div className={styles.container}>
<Cards data={data} />
<CountryPicker handleCountryChange = {
this.handleCountryChange
}
/>
<Chart data={data} provincia={provincia} />
</div>
)
}
}
export default App;
CARDS.js
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 :{confirmed, recovered, deaths, lastUpdate}}) => {
if(!confirmed) {
return 'Cargando...';
}
return(
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.infectados)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Casos Totales</Typography>
<Typography variant="h5">
<CountUp start={0} end={confirmed.value} duration={2.5} separator=","
/>
</Typography>
<Typography color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
<Typography variant="body2">Número de Casos Totales de COVID-19</Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recuperados)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Recuperados</Typography>
<Typography variant="h5">
<CountUp start={0} end={recovered.value} duration={2.5} separator=","
/>
</Typography>
<Typography color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
<Typography variant="body2">Número de Casos Recuperados Totales de COVID-19</Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.muertes)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Muertes</Typography>
<Typography variant="h5">
<CountUp start={0} end={deaths.value} duration={2.5} separator=","
/>
</Typography>
<Typography color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
<Typography variant="body2">Número de muertes totales causadas por COVID-19</Typography>
</CardContent>
</Grid>
</Grid>
</div>
)
}
export default Cards;
And the COUNTRYPICKER.js (regionpicker in my case)
import React, { useState, useEffect} from 'react';
import { NativeSelect, FormControl } from '#material-ui/core';
import styles from './CountryPicker.module.css';
import { fetchCountries } from '../../api';
const CountryPicker = ({
handleCountryChange
}) => {
const [fetchedCountries, setFetchedCountries] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setFetchedCountries(await fetchCountries());
}
fetchAPI();
}, [setFetchedCountries]);
return (
<FormControl className={styles.formControl}>
<NativeSelect defaultValue = ""
onChange = {
(e) => {
handleCountryChange(e.target.value)
}
} >
{/* Lo siguiente es para el selector de países */}
<option value="Chile">Todo Chile</option>
{fetchedCountries.map((provincia, i) => <option key={i} value={provincia}>{provincia}</option>)}
</NativeSelect>
</FormControl>
)
}
export default CountryPicker;
At first it is updating correct
JSON when it is updating at correct
Then, when selecting a region it is not updating and just displays zero
JSON when it is not displaying correctly

Answer 1

the problem is the API response format for the provincia data.
I fixed it doing this in the api/index.js
export const fetchData = async (provincia) => {
let changeableUrl = url;
if (provincia) {
changeableUrl = `${url}/confirmed`;
try {
const data = await axios.get(changeableUrl);
const filteredData = data.data.find((province) => {
if (province.provinceState == provincia){
return province;
};
})
return {confirmed: {value: filteredData.confirmed} , recovered: {value: filteredData.recovered} , deaths: {value: filteredData.deaths},
lastUpdate: new Date(filteredData.lastUpdate).toISOString()};
} catch (error) {
return error;
}
} else {
try {
const {
data: {
confirmed,
recovered,
deaths,
lastUpdate,
}
} = await axios.get(changeableUrl);
console.log("fetchdata else: ", confirmed,
recovered,
deaths,
lastUpdate);
return {
confirmed,
recovered,
deaths,
lastUpdate,
};
} catch (error) {
return error;
}
}
};
Let me know if that works for you.