React Native rendering object keys

Question

I am wondering if it is possible to render an object's keys in React Native using the map function. I am retrieving data from an api and one of the objects in the array returns the key and value. I am looking to render the keys of each object (each object can have 1-3 keys/values).

I've tried using the following but find out that mapping the object doesn't work because it is not a function of the object.

  {apiData.objectData.map((objectKey) => (
    <Text>{objectKey}</Text>
  ))}

I am expecting it to return each key for example in the image it would display: "unlimited" in text. — Stasy Meclazcke
– Stasy Meclazcke, Commented Oct 12, 2021 at 14:16

Dennis Vash · Accepted Answer · 2021-10-12 14:17:47Z

1

You can use #Object.keys():

<View>
  {Object.keys(apiData.objectData).map((objectKey) => (
    <Text key={objectKey}>{objectKey}</Text>
  ))}
</View>

// Example from docs
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

answered Oct 12, 2021 at 14:17

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

React Native rendering object keys

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related