So I'm trying to retrieve data about countries from an Api (https://restcountries.com/v3.1/all) Languages are displayed like this:
languages: {
afr: "Afrikaans",
eng: "English",
nbl: "Southern Ndebele",
nso: "Northern Sotho",
sot: "Southern Sotho",
ssw: "Swazi",
tsn: "Tswana",
tso: "Tsonga",
ven: "Venda",
xho: "Xhosa",
zul: "Zulu"
}
my code so far is:
const langs = Object.values(country["languages"]) //create array of languages
console.log(langs)
return (
<ul>
{langs.map(each => {
//if i add console.log(each) here, it returns all of the languages in console
<li>
{each} doesn't display at all
</li>
})}
</ul>
)
If you could tell me what am I doing wrong, I'd greatly appreciate it. Thanks in advance <3
The issue with your code seems to be that you aren't returning the JSX in the map function.
To fix this, there are two solutions.
1. Use brackets (()) in the callback
The first solution is to use brackets in the callback.
The brackets will make it so that it will return the value passed into the callback.
To use this, you can use the code below.
langs.map((each) => (
<li>{each}</li>
));
The only difference in this code is that you are returning it straight away, denoted by the brackets.
If you would like to make this a one-liner, you can use this code.
langs.map((each) => <li>{each}</li>);
This will do the same thing; return the JSX in the arrow function.
2. Use the return keyword
The second option is to use the return keyword.
You can use this to return the JSX so that the map function can use it.
Its usage is very simple.
langs.map((each) => {
return <li>{each}</li>;
});
This simply returns the JSX to the map function for it to use.
In conclusion, the issue is that you aren't returning the JSX in the map function.
There are two solutions for this.
return keyword