TypeError: countries is undefined ReactJS covid19 app

Viewed 105

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

0 Answers
Related