Displaying FlatList using array of objects (React Native) - react-native

Question

I have a prop where
console.log(this.props.userList);
returns
Array [
Object {
"userData": Object {
"userName": "David",
"userAge": 20,
},
"id": "ax3",
},
Object {
"userData": Object {
"userName": "Phillip",
"userAge": 27,
},
"id": "xq4",
},
Object {
"userData": Object {
"userName": "Kelly",
"userAge": 28,
},
"id": "pj7"
}
]
I am trying to generate a Flatlist from that data by writing:
<FlatList
data={this.props.userList}
keyExtractor={item => item.id}
renderItem={({ item }) =>
<Text>{item.userData.userName}</Text>
}
/>
When testing through Expo on my iphone, the app just freezes. Doesn't throw any errors or anything. Is this method incorrect?
*Adding in full render below
render() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.mainViewStyle}>
<View style={styles.searchBarViewStyle}>
<TextInput
style={styles.textInputStyle}
placeholder="User"
autoCorrect={false}
autoCapitalize="none"
onChangeText={this.onUserChanged.bind(this)}
value={this.props.userInput}
/>
</View>
<View>
<Button
title="press this"
onPress={() =>
this.props.navigation.navigate("yearSearch")
}
/>
</View>
<View>
<Button
title="testUserSearch"
onPress={() => this.showData()}
/>
</View>
<View>
<FlatList
data={this.props.userList}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<Text>{item.userData.userName}</Text>
)}
/>
</View>
</View>
</TouchableWithoutFeedback>
);
}
If I take out the Flatlist part of it, it runs fine. The showData() function currently just console logs this.props.userList, which returns the array post in the beginning.

Answer 1

you can flatten your array of object in one array (place all the objects in one array after receiving using some loop) and then use it in flat list (since you know how many entries each object has). to understand it further see the correct answer here.
react native flatlist with several arrays of data