Object.Values keys render all on one line instead of one line per item

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;

I am trying to list the languages of each country in my app, however, the languages render like this:

-EnglishSwedishItalian

instead of like this:

• English
• Swedish
• Italian

Does anyone know how to render each of the Object.values(c.lanaguages) on its own line instead of all bunched together on one line?

Thanks.

>Solution :

You’re passing an array (Obect.values(c.languages)) in a single <li> which gets flattened to a string by React.

<ul>
  {searchedCountries.map(c => <li>{Object.values(c.languages)}</li>)}
</ul>

You’ll need to instead map() the values array.

<ul>
  {
    searchedCountries.map(c =>
      <li>
        <ul>
          {Object.values(c.languages).map(l => <li>{l}</li>)}
        </ul>
      </li>
    )
  }
</ul>