TypeError: countries.map is not a function

[E-Jorge]

First of all let me thank you, for sharing this valuable knowledge
I coded along with you and everything went well for the first couple of minutes. However in the end I´m getting the following error:

TypeError: countries.map is not a function
19 | return (
20 |
21 | <NativeSelect defaultValue="" onChange={(e) => handleCountrychange(e.target.value)}>

22 | Global
| ^ 23 | {countries.map((country, i) => {country})}
24 |
25 |

[kunalkashyap855]

The name of the variable here should be what you have written in useState. According to the video, the name of the state variable is 'fetchedCountries' instead of 'countries', that might be the problem.

[FottyM]

Can you share the entire code snippet?

[harshilparmar]

@FottyM Brother @kunalkashyap855 is saying that you should write like this
{fetchedCountries.map((country, i) => {country})}

[E-Jorge]

I managed fix the problem with your support. Thank you!

[gellys]

Hello guys, taking advantage of the fact that it's still open, I'm having a similar problem:

TypeError: fetchedCountries.map is not a function
CountryPicker
tracker/src/components/CountryPicker/CountryPicker.jsx:21
18 | return (
19 |
20 |

21 | Global
| ^ 22 | {fetchedCountries.map((country, i) => (
23 |
24 | {country}

Below is how my code is :

[FottyM]

Edit:
@gellys setFetchedCountries is expecting an array but I am guessing what it is getting is an object because you are passing await fetchCountries to setFetchedCountries what you could do is.

const countries = await fetchCountries()
setFetchedCountries(countries)

// or 
setFetchedCountries(await fetchCountries())

[harshilparmar]

@FottyM yes you are right, @gellys setFetchedCountries(await fetchCountries) is not calling method,so I think it is getting whole reference of fetchCountries method.

[gellys]

Edit:
@gellys setFetchedCountries is expecting an array but I am guessing what it is getting is an object because you are passing await fetchCountries to setFetchedCountries what you could do is.

const countries = await fetchCountries()
setFetchedCountries(countries)

// or 
setFetchedCountries(await fetchCountries())

That's it! Now it worked... Thanks @FottyM 💯 👍