Displaying FlatList using array of objects (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