ReactNative Flatlist - RenderItem not working
renderItem={({ item, index }) => {
return (
<Text>{item.fName + item.lName}</Text>
);
}}
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
I was missing a curlybraces { } around the item. After adding them , now it work fine.
renderItem= {({item}) => this.Item(item.title)}
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!