I'm making covid19 tracker app following tutorial from JavaScript Mastery and i have problem with TypeError: countries is undefined,
problem displayed in browser:
19 | return (
20 | <FormControl className={styles.formControl}>
21 | <NativeSelect defaultValue="" onChange={(e) => handleCountryChange(e.target.value)}>
> 22 | <option value="">Global</option>
| ^ 23 | {countries.map((country, i) => <option key={i} value={country}>{country}</option>)}
24 | </NativeSelect>
25 | </FormControl>
//and below fetchAPI
10 |
11 | useEffect(() => {
12 | const fetchAPI = async () => {
> 13 | setCountries(await fetchCountries());
| ^ 14 | };
15 |
16 | fetchAPI();
CountryPicker.jsx file
import React, { useState, useEffect } from 'react';
import { NativeSelect, FormControl } from '@material-ui/core';
import { fetchCountries } from '../../api';
import styles from './CountryPicker.module.css';
const Countries = ({ handleCountryChange }) => {
const [countries, setCountries] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setCountries(await fetchCountries());
};
fetchAPI();
}, []);
return (
<FormControl className={styles.formControl}>
<NativeSelect defaultValue="" onChange={(e) => handleCountryChange(e.target.value)}>
<option value="">Global</option>
{countries.map((country, i) => <option key={i} value={country}>{country}</option>)}
</NativeSelect>
</FormControl>
);
};
export default Countries;
For the rest of the code can be looked at JavaScrip Master git https://github.com/adrianhajdin/project_corona_tracker/tree/master/src I have the same code and still doesn't work also i installed all necessary npm dependencies