So I'm trying to use React Native's FlatList renderItem property, but something very strange is happening.

The data property is set to an array which has elements which are not undefined, but then, in the renderItem function, it gives me an error saying that the argument of the function is undefined, unless I call the argument item.

Here's my code:

export default class Profile extends React.Component {

    onLearnMore = (user) => {

        this.props.navigation.navigate('UserDetail', user)

    }



    render() {

        return (

            <List>

                <FlatList

                    data={data.users}

                    renderItem={( {item} ) => {

                        console.log(item)

                        return (<ListItem

                            roundAvatar

                            title={`${item.fName} ${item.lName}`}

                            onPress={() => this.onLearnMore(item)}

                        />)

                    }}

                />

            </List>

        )

    }

}

If I swapped {item} with {userData}, then userData would be undefined later in the function. Does anyone know why this happens?