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