How to get key from object in map function?

Question

How to get the key from object in

{this.state.data.map((object, index) => (
      <div>object.key</div>

    ))}

For example if this.state.data was

 [{mykey1:23},{mykey2:24},{mykey3:34}]

I would want it to return

 <div>mykey1</div>
 <div>mykey2</div>
 <div>mykey3</div>

Is the key name really what you want and not the value? (eg, <div>23</div>) — Herohtar
– Herohtar, Commented May 26, 2019 at 0:51

Jack Bashford · Accepted Answer · 2019-05-26 01:13:59Z

2

Use Object.keys():

{this.state.data.map(obj => <div>{Object.keys(obj)[0]}</div>)}

edited May 26, 2019 at 1:13

answered May 26, 2019 at 0:59

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dance2die Over a year ago

I believe it's not an object but an array of object, thus it'd return array indices ["0", "1", "2"], not keys

Niraj Gupta · Accepted Answer · 2019-05-26 01:28:04Z

You are not interpolating the value you want to render to start with. You would have to put values that you want to be evaluated within curly brackets for them to be rendered from your states/props. Though I'm assuming your example was typed in haste and that is not the reason why this is not working for you. To get keys defined in an object you would have to use Object.keys() which returns an array of strings with all the keys. Then you could loop over the resulting array and render them within your JSX view.

Here's a working fiddle for your reference: https://jsfiddle.net/2q19rpaz/

let data = [{mykey1:23},{mykey2:24},{mykey3:34, mykey4:34}];
return data.map((object, index) => {
    return Object.keys(object).map((key, index) => {
        return (<div>{key}</div>);
    })
})

Collectives™ on Stack Overflow

How to get key from object in map function?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related