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(

Infected Case {new Date(lastUpdate).toDateString()} Number of AcTive case of Covid-19 Recovered Case {new Date(lastUpdate).toDateString()} Number of Recoveries From COVID-19 Deaths Case {new Date(lastUpdate).toDateString()} Number of Deaths caused By COVID-19

);

};

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?