title: React Native Flatlist renderItem
body: <p>Working with React Native, having some issues with the FlatList component.
  This is my FlatList</p>
  
  <pre><code>    &lt;FlatList
       data={this.state._data}
       renderItem={() =&gt; this.renderItem()}
       refreshControl={
         &lt;RefreshControl
          onRefresh={() =&gt; this.handleRefresh}
          refreshing={this.state.refreshing}
         /&gt;
        }
      /&gt;
  </code></pre>
  
  <p>This is my renderItem function:</p>
  
  <pre><code>    renderItem({item, index}) {
       return (
        &lt;View style={{marginTop: 10, marginHorizontal: 10, paddingLeft: 
           10}}&gt;
          &lt;ListItem
              roundAvatar
              title={`${item.itemName}`}
              subtitle={`${item.amount}`}
              avatar={require('../../../images/logo.png')}
          /&gt;
          &lt;View
              style={{
                  paddingBottom: 10,
                  paddingTop: 10,
                  display: 'flex',
                  flexDirection: "row",
                  justifyContent: "space-around",
                  alignContent: "center"
              }}
           &gt;
              &lt;View style={{ flexDirection: "row", alignContent: 
                   "center", width:"45%"}}&gt;
                  &lt;Button
                      block
                      small
                      // disabled={this.state.acceptButtonGray}
                      style=
                        {this.state.acceptButtonGray ? ({
                        backgroundColor: 'gray',
                        width: "100%"
                        }) : ({backgroundColor: "#369ecd",
                           width: "100%"
                        })}
                      onPress={() =&gt;
                        this.setState({
                           modalVisible: true,
                           // acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
                           acceptOffer: true,
                            })
                        }
                        &gt;
                      &lt;Text&gt;
                          Accept
                      &lt;/Text&gt;
                  &lt;/Button&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      &lt;/View&gt;
     );
    }
  </code></pre>
  
  <p>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.  </p>
  
  <p>Passing my RenderItem function as shown above, I receive </p>
  
  <pre><code>    TypeError: Cannot read property 'item' of undefined.
  </code></pre>
  
  <p>Passing my RenderItem function like this:</p>
  
  <pre><code>    renderItem={this.renderItem}
  </code></pre>
  
  <p>I Get This Error:</p>
  
  <pre><code>    _this2.setState is not a function
  </code></pre>
  
  <p>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?  </p>
  
  <p>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.  </p>
  
  <p>The Modal close button takes this.state.acceptOffer and if true, sets this.state.acceptButtonGray to true, should this logic be somewhere else?</p>
  
  <p>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?  </p>
  
  <p>I greatly appreciate any help given.</p>