Estoy tratando de enumerar todos los 'idiomas' de un archivo JSON en un <li> usando la API de los demás países ( https://restcountries.com/v3.1/all ) que se ve así (ejemplo país Malta)
languages: { eng: "English", mlt: "Maltese" },Mi código
filteredCountries.map(country => <div key={country.cca2}> <h1>{country.name.common}</h1> <>Capital: {country.capital}</><br/> <>Population: {country.population.toLocaleString()}</> <h3>Languages</h3> <ul> {Object.keys(country.languages).map(lang => { <li key={lang.name}>{lang.name}</li> } )} </ul> <img src={country.flags.png} alt='Country Flag'/> </div> Puedo extraer el nombre del país, la capital, la población y la bandera, pero no puedo enumerar los idiomas de manera eficiente ya que cada país tiene una cantidad variada de idiomas. El uso Object.keys no proporciona errores, pero no muestra lo que quiero. Intenté usar country.languages.map pero aparece el error TypeError: country.languages.map is not a function Pude obtener el nombre del país y la capital usando country.name.cca2 y country.capital respectivamente
Debe usar country.languages[lang] dentro de Object.keys(country.languages).map()
Además, debido a que está utilizando la notación lambda, debe omitir las llaves { y } después de => .
{Object.keys(country.languages).map(lang => <li key={lang}>{country.languages[lang]}</li> )} O, si desea los curlies, entonces el código dentro de las llaves debe usar la palabra clave de return :
{Object.keys(country.languages).map(lang => { return <li key={lang}>{country.languages[lang]}</li> } )}