Display Object’s Key-Value Pairs in ReactJS

image from freecodecamp.org

Mostly, to display the value of an object in ReactJS, you just need to call the name of the object followed by the key of the value to be displayed.

const Country = () =>{
const countryLang = {
  languages: {
    fra: "French",
    gsw: "Swiss German",
    ita: "Italian",
    roh: "Romansh"
  }
}

  return(
    <div>
      <h2>Languages:</h2>
      <ul>
        <li>
          {countryLang.languages.fra}    
        </li>
        <li>
          {countryLang.languages.gsw}    
        </li>
        <li>
          {countryLang.languages.ita}    
        </li>
        <li>
          {countryLang.languages.roh}    
        </li>
      </ul>      
    </div>
  )
}

Below is a technique for displaying values dynamically by using the map( ) function.

const Country = () =>{
const countryLang = {
  languages: {
    fra: "French",
    gsw: "Swiss German",
    ita: "Italian",
    roh: "Romansh"
  }
}

  return(
    <div>
      <h2>Languages:</h2>
      <ul>
        {Object.keys(countryLang.languages).map((key, index)=>(
          <li key={index}>{countryLang.languages[key]}</li>
        ))}
      </ul>      
    </div>
  )
}

References:
[1] https://www.pluralsight.com/guides/how-to-display-key-and-value-pairs-from-json-in-reactjs