React JS: Rendering object keys and its values

11,350

Like this:

{attributes.map((items, index) => {
  return (
    <ul key={index}>
    {Object.keys(items).map((key) => {
      return (
        <li key={key + index}>{key}:{items[key]}</li>
      )
    })}
    </ul>
  )
})}
Share:
11,350

Related videos on Youtube

Mitesh Sevani
Author by

Mitesh Sevani

Updated on June 04, 2022

Comments

  • Mitesh Sevani
    Mitesh Sevani almost 2 years

    I am trying to render an objects key and value, however it just doesn't seem to work.

    I have managed to display it in the console, but not the actual dom. I am iterating through the object which has multiple entries.

    What do I need to do to actually print out the values?

    {attributes.map(items => {                                
                                {Object.keys(items).map((key) => {
                                    console.log(key, items[key]);
                                })}
                            })}