Can't render an array of objects in FlatList

Question

I have this array of dummy data:

const DUMMY_DATA = [
{
    id: '1',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
{
    id: '2',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
{
    id: '3',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
]

I have a component that takes the object, and renders it.

This is what I have now:

const Item = ({ meeting }) => (
    <TouchableOpacity style={styles.cardButton} onPress={this._showMeetingDetails}>
        <MeetingCard meetingModel={meeting} />
    </TouchableOpacity>
);

const HomeScreen = ({ navigation }) => {
    _showMeetingDetails = () => {
        navigation.navigate('MeetingDetails', { meeting: meeting });
    }


    const renderItem = ({ meeting }) => (
        <Item meeting={meeting} />
    );

    return (
        <>
            <SafeAreaView style={styles.homeContainer}>
                <View>
                    <View style={styles.headerContainer}>
                        <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                            <Text style={styles.title}>Groups</Text>
                            <Avatar
                                rounded
                                source={{
                                    uri:
                                        'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
                                }}
                            />
                        </View>
                        <Text style={styles.subtitle}>Find people to learn with</Text>
                    </View>
                    <OptionChooser />


                  <FlatList
                      data={DUMMY_DATA}
                      renderItem={renderItem}
                      keyExtractor={item => item.id}
                  />


                </View>
                <FloatingButton onPress={this._showAddMeeting} />
            </SafeAreaView>
        </>
    )
}

So, MeetingCard is the component that takes the object and renders it, but when I try to use it in MeetingCard, I get an error:

 TypeError: undefined is not an object (evaluating 'props.meetingModel.subject')

I want to render this in a FlatList, I tried every solution I found but I couldn't figure out why it won't work for me. I do understand that I'm passing undefined as meetingModel, but I can't figure out what is the reason. I tried few solution to render an object array in a FlatList, but It didn't work for me - I really don't know what I'm doing wrong (I'm new to React Native).

This is my MeetingCard component, in case this is needed (I don't think it is needed, as the problem is that I'm passing undefined to it):

const MeetingCard = (props) => {
return (
    <View style={styles.card}>
        <View>
            <Text style={styles.subject}>
                {props.meetingModel.subject}
            </Text>
            <Text style={styles.creator}>
                Created By: {props.meetingModel.creator}
            </Text>
        </View>
        <View>
            <View style={styles.separator}></View>
            <View style={styles.infoRow}>
                <Icon name="time-outline" size={24} color="#000" />
                <Text style={{ marginVertical: 4, marginHorizontal: 8 }}>Scheduled to: {props.meetingModel.date}</Text>
            </View>
            <View style={styles.infoRow}>
                <Icon name="people-outline" size={24} color="#000" />
                <Text style={{ marginVertical: 4, marginHorizontal: 8 }}>Maximum of: {props.meetingModel.max_participants} people</Text>
            </View>
        </View>
    </View>
)
}

Answer 1

The renderItem function of a FlatList takes an object with the key names item, index, and separators. Since there is no meeting key in renderItem, it is undefined. I think if you just switch it from

const renderItem = ({ meeting }) => (
    <Item meeting={meeting} />
);

to

const renderItem = ({ item: meeting }) => (
    <Item meeting={meeting} />
);

that should work!

Good luck!