Reactjs – How to re-render flatlist

react-nativereact-native-flatlistreactjs

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it?

My goal is to update the text value when user press button …

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

Best Answer

Use the extraData property on your FlatList component.

As the documentation states:

By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

Related Solutions

React-native FlatList not rerendering row when props change

The problem here lies within the fact that

You are mutating an existing slice of state instead of creating a mutated copy

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};

This should be

_onCategoryChosen = category => {
    var oldReportCopy = Object.assign({}, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState({ report: oldReportCopy });
};

The props of FlatList remain the same, your _renderRow function may rely on the selectedCategory prop which does change (If not for the first mistake), but the FlatList component does not know about that. To solve this, use the extraData prop.
```
 <FlatList
   data={this.props.items.categories.edges}
   renderItem={this._renderRow}
   horizontal={true}
   keyExtractor={(item, index) => item.node.id}
   extraData={this.props.selectedCategory}
 />
```

Best Answer

Related Solutions

React-native FlatList not rerendering row when props change

Related Topic