Raphael Onofre Raphael Onofre - 2 months ago 7
Javascript Question

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