Edit state of every item of a FlatList - react-native

Question

I made a page in which I use a FlatList. This FlatList uses an item component I made that display another view below itself when pressed by setting a state "hidden" to false. The main issue I have is that I can't find a way to change the "hidden" state to true when one of the item is pressed, hence always keeping only 1 item displaying the additional view at the time. In the same time, when I refresh/re-render my FlatList, it does not set all the "hidden" state back to true.
This is where I render my FlatList
_onRefresh() {
this.setState({refreshing: true}, () => this._loadList());
}
render() {
return (
<View style={[style.container, style.whiteBackground]}>
<CategoryFilter filterCallback={this._changeCategory}/>
<FlatList
data={this.state.list}
extraData={this.state}
renderItem={({item}) =>
<ListItemComponent item={item} category={this.state.category}/>
}
refreshing={this.state.refreshing}
onRefresh={() => this._onRefresh()}
/>
</View>
);
}
And this is where I render and display the hidden view
constructor(props) {
super(props);
this.state = {
hidden: true
};
}
componentDidMount() {
this.setState({hidden: true});
}
_onPress() {
this.setState({
hidden: !this.state.hidden
});
}
[...]
_renderOS(item) {
if (Platform.OS === 'android') {
return (
<TouchableNativeFeedback onPress={() => this._onPress()}>
{this._renderItem(item)}
</TouchableNativeFeedback>
);
} else if (Platform.OS === 'ios') {
return(
<TouchableOpacity onPress={() => this._onPress()}>
{this._renderItem(item)}
</TouchableOpacity>
);
}
}
[...]
_renderDescription(item) {
if (this.state.hidden === true) {
return null;
} else {
return (
<View style={listItemStyle.descriptionContainer}>
<Text style={listItemStyle.description}>
{item.description}
</Text>
</View>
);
}
}
I just want to be able to have only one of the list item with hidden set to false at the time and have said item to be set to hidden=true when the page is refreshed, but I never found anything that could help me.

Answer 1

So after thinking a lot I finally found a solution.
Instead of handling the hidden state in every item, I made a list of every hidden state associated to the items ids in the component where my flatlist is, adding a function that will set the previously opened item to hidden and open the new one, and passing it as a callback to my items so that it can be called when I press them.
_onPress(id) {
let items;
items = this.state.items.map((item) => {
if (item.id === this.state.openId)
item.open = false;
else if (item.id === id)
item.open = true;
return item;
});
this.setState({
items: items,
openId: (id === this.state.openId ? '' : id)
});
}
<FlatList
data={this.state.items}
extraData={this.state}
renderItem={({item}) =>
<ListItemComponent
onPress={this._onPress.bind(this)}
bet={item}
categoryList={this.state.categoryList}
open={item.open}/>
}
refreshing={this.state.refreshing}
onRefresh={() => this._onRefresh()}
/>