ReactNative Flatlist - RenderItem not working

Question

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?

Answer 1

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!

Answer 2

Please read this answer carefully. I experienced it and wasted many hours to figure out why it was not re-rendering:

We need to set extraData prop of FlatList if there is any change in the state like so:

<FlatList data={this.state.data} extraData={this.state} .../>

Please see the official documentation here:

https://facebook.github.io/react-native/docs/flatlist.html

Answer 3

   renderItem={({ item, index }) => {
                return (
              <Text>{item.fName + item.lName}</Text>
                );
              }}

Answer 4

I was missing a curlybraces { } around the item. After adding them , now it work fine.

renderItem= {({item}) => this.Item(item.title)}