How do I loop over an object and render them as
:

Question

I have fetched a particular object from express endpoint and I have gotten this on the console

I how do I map it in such a way that it will return a jsx that looks like

<li>keys</li> : <li>values</li>

eg Company: DML

This could help you https://stackoverflow.com/questions/50487382/react-key-in-li — navnath, Sep 14 '21 at 18:01

Cuong Vu · Accepted Answer · 2021-09-14T18:19:26.377

2

You can use Object.entries with map in you React render function

Object.entries(yourObj).map(([key, value]) => {
    return <li key={key}>{key} : {value}></li>
})

edited Sep 14 '21 at 18:19

answered Sep 14 '21 at 18:04

Cuong Vu

score 0 · Answer 2 · answered Sep 14 '21 at 18:13

I stored the value in the state for this example, but you may store yours differently.

<ul>
    { Object.entries(this.state.data).map(([key, value]) => <li key={key}>{key}: {value}</li>) }
</ul>

The key={key} prop will prevent the "Each child in a list should have a unique key prop" warning.

2 Answers2