Problem rendering the contents of array using map on reactjs - arrays

Question

I use axios to get the data from the server and store the received data into the array setCountries. This part works.
Code in codesandbox
Then, I simply want to render the whole list of country names contained on the array using map.
I am making some mistake there, because I get the error
TypeError: setCountries.map is not a function
The error comes from this part of the code.
Where is the error coming from?
const [countries, setCountries] = useState([])
const showCountries = () => {
return (
<div>
<ul>
{setCountries.map((country) =>
<p key={country.alpha2Code}>{country.name}</p>
)}
</ul>
</div>
)
}
return (
<div>
<div>
<h1>Countries</h1>
{showCountries()}
</div>
</div>
);
}
export default App;

Answer 1

You're using function setCountries instead of array countries
Corrected:
<ul>
{countries.length > 0 && countries.map((country) =>
<p key={country.alpha2Code}>{country.name}</p>
)}
</ul>
Also use null checks to avoid other issues

Answer 2

setCountries is a function for setting the country's state. It does not have the map function.
The solution here will be to use countries.map instead:
const showCountries = () => {
return (
<div>
<ul>
{countries.map((country) =>
<p key={country.alpha2Code}>{country.name}</p>
)}
</ul>
</div>
)
}

Answer 3

setCountries is a function and that's why you can't use a map. If you try the code I wrote below, your problem will be resolved.
{countries.map((country) =>
<p key={country.alpha2Code}>{country.name}</p>
)}