problem in my code

[bibashkoirala]

Good

[WisdomAyo]

there's a small issue on my code the countrypicker is not working after selecting a country and i've check the whole code i'm not missing anything

[imelendez]

there's a small issue on my code the countrypicker is not working after selecting a country and i've check the whole code i'm not missing anything

share the code here so we can take a look at it.

[WisdomAyo]

there's a small issue on my code the countrypicker is not working after selecting a country and i've check the whole code i'm not missing anything

share the code here so we can take a look at it.

import React, { useState, useEffect } from 'react'; import { NativeSelect, FormControl } from '@material-ui/core';

import { fetchCountries } from '../../api';

import styles from './CountryPicker.module.css';

const CountryPicker = ({ handleCountryChange }) => { const [ fetchedCountries, setFetchedCountries ] = useState([]); useEffect(() => { const fetchAPI = async () => { setFetchedCountries(await fetchCountries());

        };

        fetchAPI();
    }, []);

return(
   <FormControl className={styles.formControl}>
       <NativeSelect defaultValue="" onChange={(e) =>  handleCountryChange=(e.target.value) }>
           <option value=""> Global</option>
{fetchedCountries.map((country, i) => <option key={i} value={country}>{country}</option>)}
       </NativeSelect>
   </FormControl>
);

};

export default CountryPicker;

[WisdomAyo]

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 'loading.....';
}

return( <div className={styles.container}> <Grid container spacing={3} justify='center'> <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.infected)}> <CardContent> <Typography color="textSecondary" gutterBottom className={cx(styles.h1)}>Infected Case</Typography> <Typography variant="h5"> <CountUp start={ 0} end={confirmed.value} duration={2.5} separator="," /> </Typography> <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography> <Typography variant="body2">Number of AcTive case of Covid-19 </Typography> </CardContent>

  </Grid>

  <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recovered)}>
                    <CardContent>
      <Typography color="textSecondary" gutterBottom>Recovered Case</Typography>
      <Typography variant="h5">
           <CountUp
              start={ 0}
              end={recovered.value}
              duration={2.5}
              separator=","
        />
           </Typography>
      <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
      <Typography variant="body2">Number of Recoveries From  COVID-19   </Typography>
     </CardContent>
      </Grid>

  <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.deaths)}>
      <CardContent>
      <Typography color="textSecondary" gutterBottom>Deaths Case</Typography>
     <Typography variant="h5">
     <CountUp
              start={ 0}
              end={deaths.value}
              duration={2.5}
              separator=","
        />
       </Typography>
     <Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
     <Typography variant="body2">Number of Deaths caused By COVID-19   </Typography>
     </CardContent>
     
 </Grid>
            </Grid>
    </div>
);

};

export default Cards;

[WisdomAyo]

import React, { useState, useEffect } from 'react'; import { fetchDailyData } from '../../api'; import { Line, Bar } from 'react-chartjs-2'; import styles from './Chart.module.css';

const Chart = ({ data: {confirmed, deaths, recovered }, country }) => { const [dailyData, setDailyData] = useState([]);

useEffect(() => {
    const fetchAPI = async () => {
      const initialDailyData = await fetchDailyData();

      setDailyData(initialDailyData);
    };

        

        fetchAPI(); 
    
}, []);  

const lineChart = (
 dailyData.length 
  ?( 
  <Line
    data={{
        labels:  dailyData.map(({ date }) => date),
        datasets: [{
            data: dailyData.map(({ confirmed}) => confirmed),
            label: 'Infected',
            borderColor: '#3333ff',
            fill: true,
        }, {
            data: dailyData.map(({ deaths}) => deaths),
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'rgba(255, 0, 0, 0.5)',
            fill: true, 

        }],
    }}
    />): null
);


const  barChart = (
     confirmed
    ?(
        <Bar 
            data={{
                    labels:['Infected', 'Recovered', 'Deaths'],
                    datasets: [{
                        label: 'People',
                        backgroundColor:['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(255, 0, 0, 0.5)' ],
                        data:[ confirmed.value, recovered.value, deaths.value ],
                    },
                ],
            }}
            options={{
                legend: {display: false},
                title:{display:true, text:`Current state in ${country}`},
            }}
        />
    ) : null
);
return(
    <div className={ styles.container}>
           {country ? barChart: lineChart } 
    </div>
)

}

export default Chart;

[chrc]

What about App.js and your console log error please?