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?
Reason is that, every object in the data
array is referenced through item
property of the actual parameter passed to renderItem
function. Here, you are using object destructuring to extract only item
property of the passed in object, thats why u are using {item}
. When you are changing this name to userData
(which is missing in the function argument), you are getting undefined
. Have a look at the function signature of renderItem
here.
If you want to use userData
instead of item
, then you can rename item
to userData
as
renderItem= ({item: userData}) => {...}
Hope this will help!