Iterate over key/value and display it

I’m trying to render a key – value on the view(ScrollView) but not getting success on the code below:

render(){
  const MyResult = this.state.data.map((myData) => {
    Object.keys(myData).map((key) => {
      console.log(key + " - " + myData[key]);    
      return( 
        <View>
          <Text>{key} - {myData[key]}</Text>
        </View>
      )
    });
  })


  return(
   <View style={styles.container}>
     <ScrollView>
       {MyResult}
     </ScrollView>
   </View>
  )}
}

My console.log is displaying everything ok and i guess the error starts on the Object.keys… The display on the simulator obviously is not showing anything.

How can I iterate over keys,values and display it?

Answer

As Felix mentioned in the comments, you’re not “returning” anything from the outer map. Just try adding a return before Object.keys and see if it works, like such:

 const MyResult = this.state.data.map((myData) => {
   return Object.keys(myData).map((key) => {
      console.log(key + " - " + myData[key]);    
      return( 
        <View>
          <Text>{key} - {myData[key]}</Text>
        </View>
      )
    });
  })

Leave a Reply

Your email address will not be published. Required fields are marked *