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

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

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

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