React Native Flatlist renderItem

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

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 4

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

Answer 5

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

Answer 6

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)
}