React-native: Can not render item of FlatList when state changed.

[Symous]

Hi, I have a checkbox which is hidden in the right part of the item of FlatList, and when I do a longPress at the Item, the checkbox is supposed to show as it's state has set to true.

<FlatList data={...} renderItem{({item})=>{
      <EveryItem onLongPress={()=>{this.setState({isEditing :true})}}>
           {this.state.isEditing ? <Checbox /> : null}
      </EveryItem>
}}
>

but the result is the checkbox never show. Any idea about that ? Thanks.

[Symous]

In brief , we can not change the Item style of the FlatList once we render it.such as press it to give it a different background color.

[Symous]

OK.I just found out that if we want the FlatList to know the data change outside of the data prop,we need set it to extraData, so I do it like this now:

<FlatList data={...} extraData={this.state} .../>

refer to : https://facebook.github.io/react-native/docs/flatlist.html - extraData .

[francisngo]

I am running into a similar issue with having checkboxes inside FlatList. I am using react-native-elements and added the extraData={this.state} snippet to my FlatList. But now, when I select one checkbox, all of the checkboxes are selected. Did you run into this similar issue? Did you resolve it? If so, how?

[techThrive]

extraData={this.state} fixing my issue. But its reloading entire table, want to reload, perticular cell.

[Friendly-Robot]

@TamojitPalGit shouldComponentUpdate() is working as it should for me.

[Mr3JZ]

Try setting data:[] in your handleRefresh function. That worked for me.

[ThakurBallary]

@Symous thanks for mentioning https://facebook.github.io/react-native/docs/flatlist.html#extradata this worked for me.

[fabiopaiva]

extraData={{ onlyWhatIneedToCheckOutsideData }}

worked for me