React Native Flatlist renderItem - react-native

Question

Working with React Native, having some issues with the FlatList component.
This is my FlatList
<FlatList
data={this.state._data}
renderItem={() => this.renderItem()}
refreshControl={
<RefreshControl
onRefresh={() => this.handleRefresh}
refreshing={this.state.refreshing}
/>
}
/>
This is my renderItem function:
renderItem({item, index}) {
return (
<View style={{marginTop: 10, marginHorizontal: 10, paddingLeft:
10}}>
<ListItem
roundAvatar
title={`${item.itemName}`}
subtitle={`${item.amount}`}
avatar={require('../../../images/logo.png')}
/>
<View
style={{
paddingBottom: 10,
paddingTop: 10,
display: 'flex',
flexDirection: "row",
justifyContent: "space-around",
alignContent: "center"
}}
>
<View style={{ flexDirection: "row", alignContent:
"center", width:"45%"}}>
<Button
block
small
// disabled={this.state.acceptButtonGray}
style=
{this.state.acceptButtonGray ? ({
backgroundColor: 'gray',
width: "100%"
}) : ({backgroundColor: "#369ecd",
width: "100%"
})}
onPress={() =>
this.setState({
modalVisible: true,
// acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
acceptOffer: true,
})
}
>
<Text>
Accept
</Text>
</Button>
</View>
</View>
</View>
);
}
this.setState in the onPress in the button should make a Modal visible, and set acceptOffer to true. Modal opens, user confirms their offer. The offer button which opened that modal now should be gray, and even better, disabled.
Passing my RenderItem function as shown above, I receive
TypeError: Cannot read property 'item' of undefined.
Passing my RenderItem function like this:
renderItem={this.renderItem}
I Get This Error:
_this2.setState is not a function
The FlatList Component is certainly responsible for part of my issue, as well as how and where I am calling this.setState. Only one button is shown in my post, but there are two, one for accept, one for decline. Would having two modals change anything?
The FlatList displays my ListItem components with ease until I attempt to call this.setState in the buttons inside the View which contains those ListItems.
The Modal close button takes this.state.acceptOffer and if true, sets this.state.acceptButtonGray to true, should this logic be somewhere else?
Is there another way to open a modal and change the button color without using component state? Does react want these buttons inside of a TouchableOpacity?
I greatly appreciate any help given.

Answer 1

you should write a renderItem function like this
renderItem = ({item, index}) => {
// return here
}

Answer 2

Change your renderItem method to renderItem={this.renderItem.bind(this)}?

Answer 3

As per my Knowledge item and index are passed as object in flatlist's renderItem
so we can pass by two ways
1 way
Flatlist Component
<FlatList
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => this._renderItem(item, index)} //Passing as object from here.
/>
Render Item
_renderItem = (item, index) => {
console.log(item)
console.log(index)
}
2 way
Flatlist Component
<FlatList
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={( item, index ) => this._renderItem(item, index)}
/>
Render Item
_renderItem = ({item, index}) => { // Passing as object from here
console.log(item)
console.log(index)
}

Answer 4

1) You can write function as -
renderItem = ({item, index}) => {
// return here
}
2) or else if you want to execute your function then -
<FlatList
data={this.state._data}
renderItem={(item) => this.renderItem.bind(this, item)}
refreshControl={
<RefreshControl
onRefresh={() => this.handleRefresh}
refreshing={this.state.refreshing}
/>
}
/>

Answer 5

You have to use bind(this,item) or change function like (item)=>.

Answer 6

I experienced the same issue 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