Home > OS >  React Native rendering object keys
React Native rendering object keys

Time:10-13

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>
  ))}

enter image description here

CodePudding user response:

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']
  • Related