import {useState, useEffect } from 'react' import axios from 'axios' const Countries = ({searchedCountries}) => { console.log(searchedCountries.map(c => c.languages)) if (searchedCountries.length >= 10) { return ( <div> <p>too many countries to list, please narrow your search</p> </div> ) } if (searchedCountries.length === 1) { return ( <div> capital: {searchedCountries.map(c => <p>{c.capital}</p>)} area: {searchedCountries.map(c => <p>{c.area}</p>)} <h2>Languages</h2> <ul> {searchedCountries.map(c => <li>{Object.values(c.languages)}</li>)} </ul> {searchedCountries.map(c => <img src={Object.values(c.flags)[0]} /> )} </div> ) } return ( <ul> {searchedCountries.map(c => <li>{c.name.common}</li>)} </ul> ) } const App = () => { const [countries, setCountries] = useState([]) const [newSearch, setNewSearch] = useState('') const handleSearchChange = (event) => { setNewSearch(event.target.value) } const searchedCountries = countries.filter(c => c.name.common.includes(newSearch)) useEffect(() => { console.log('effect') axios .get('https://restcountries.com/v3.1/all') .then(response => { console.log('promise fulfilled') setCountries(response.data) }) }, []) return ( <div> <div><p>find countries</p><input value={newSearch} onChange={handleSearchChange} /></div> <div> <h2>countries</h2> <Countries searchedCountries={searchedCountries} /> </div> </div> ) } export default App;

Estoy tratando de enumerar los idiomas de cada país en mi aplicación, sin embargo, los idiomas se muestran así:

-InglésSuecoItaliano

en lugar de así:

• inglés
• sueco
• italiano

¿Alguien sabe cómo representar cada uno de los Object.values(c.lenaguages) en su propia línea en lugar de agruparlos en una sola línea?

Gracias.