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
_renderRowfunction may rely on theselectedCategoryprop which does change (If not for the first mistake), but the FlatList component does not know about that. To solve this, use theextraDataprop.<FlatList data={this.props.items.categories.edges} renderItem={this._renderRow} horizontal={true} keyExtractor={(item, index) => item.node.id} extraData={this.props.selectedCategory} />