hello sir i have issue that my cards are not showing result of a specific country it will show the global result but does not show specific country report
priyanshisharma-21 opened this issue · 5 comments
app.js code
import React from 'react';
import{ Cards,Chart, CountryPicker} from './components';
import styles from './App.module.css';
import {fetchData} from './api/';
// import styles from './Chart.module.css';
class App extends React.Component{
state = {
data:{},
country: '',
}
async componentDidMount(){
const fetchedData =await fetchData();
this.setState({data: fetchedData });
}
handleCountryChange = async (country) =>{
const fetchedData =await fetchData(country);
// console.log(fetchedData);
this.setState({ data: fetchedData, country: country});
}
render()
{
const {data} = this.state;
return(
{/* */}
</div>
);
}
}
export default App;
Can you send api/index.js file? I faced the same issue but recovered from it.
api/index.js
import axios from 'axios';
const url='https://covid19.mathdro.id/api';
export const fetchData = async (country) => {
let changeableUrl =url;
if(country){
changeableUrl = 'https://covid19.mathdro.id/api/countries/country';
}
try{
const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(url);
return {confirmed, recovered, deaths, lastUpdate};
}catch (error){
console.log(error);
}
}
export const fetchDailyData = async ()=> {
try{
const {data} = await axios.get(url('https://covid19.mathdro.id/api/daily'));
const modifiedData = data.map((dailyData)=> ({
confirmed: dailyData.confirmed.total,
deaths: dailyData.deaths.total,
date: dailyData.reportDate,
}));
return modifiedData;
}catch (error){}
}
export const fetchCountries = async () => {
try{
const {data: {countries}}= await axios.get('https://covid19.mathdro.id/api/countries ');
return countries.map((country) => country.name);
}catch(error){
console.log(error);
}
};
api/index.js
import axios from 'axios';
const url='https://covid19.mathdro.id/api';
export const fetchData = async (country) => {
let changeableUrl =url;
if(country){
changeableUrl = 'https://covid19.mathdro.id/api/countries/country';
}
try{
const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(url);return {confirmed, recovered, deaths, lastUpdate}; }catch (error){ console.log(error); }
}
export const fetchDailyData = async ()=> {
try{
const {data} = await axios.get(url('https://covid19.mathdro.id/api/daily'));
const modifiedData = data.map((dailyData)=> ({
confirmed: dailyData.confirmed.total,
deaths: dailyData.deaths.total,
date: dailyData.reportDate,
}));
return modifiedData;
}catch (error){}}
export const fetchCountries = async () => {try{ const {data: {countries}}= await axios.get('https://covid19.mathdro.id/api/countries '); return countries.map((country) => country.name); }catch(error){ console.log(error); }
};
Got you error, you changed the new URL in changeableUrl but didn't pass that to API for fetching, made changes in code, and attached below. Hope it helped you :)
`export const fetchData = async (country) => {
let changeableUrl =url;
if(country){
changeableUrl = 'https://covid19.mathdro.id/api/countries/country';
}
try{
const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(changeableUrl);
return {confirmed, recovered, deaths, lastUpdate};
}catch (error){
console.log(error);
}
}`
i am getting same error
{"error":{"message":"Country country
not found in JHU database"}}