Así que estoy tratando de recuperar datos sobre países de una Api ( https://restcountries.com/v3.1/all ) Los idiomas se muestran así:
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" }mi código hasta ahora es:
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> )Si pudieras decirme que estoy haciendo mal, te lo agradecería mucho. Gracias de antemano <3
El problema con su código parece ser que no está devolviendo el JSX en la función de map .
Para solucionar esto, hay dos soluciones.
1. Use corchetes ( () ) en la devolución de llamada
La primera solución es usar corchetes en la devolución de llamada.
Los corchetes harán que devuelva el valor pasado en la devolución de llamada.
Para usar esto, puede usar el siguiente código.
langs.map((each) => ( <li>{each}</li> ));La única diferencia en este código es que lo devolverá de inmediato, indicado por los corchetes.
Si desea que esto sea una sola línea, puede usar este código.
langs.map((each) => <li>{each}</li>);Esto hará lo mismo; devuelve el JSX en la función de flecha.
2. Usa la palabra clave de return
La segunda opción es utilizar la palabra clave return .
Puede usar esto para devolver el JSX para que la función de map pueda usarlo.
Su uso es muy sencillo.
langs.map((each) => { return <li>{each}</li>; }); Esto simplemente devuelve el JSX a la función de map para que lo use.
En conclusión, el problema es que no está devolviendo el JSX en la función de map .
Hay dos soluciones para esto.
return