React native updating multiple child component states - react-native

Question

I am making a minesweeper app in react native as a personal project to try and learn the concepts. The problem I am having is trying to update multiple children objects at the same time. I'm not sure if this is the best practice.
I have 3 components Game > Grid > cell. The Game component takes care of the logic of the game such as timer/win condition/lose condition. The grid is a collection of cells and determines what each cell should be.
Game component:
render() {
return (
<Grid
action={this.props.action}
firstClick={this.state.firstClick}
/>
);
}
I pass the state firstClick to the grid component which is equal to true. meaning when I tap the first cell I want it to reveal all surrounding neighbors while first click is equal to true.
Grid Component:
_renderItem = ({ item }) => (
<Cell
item={item}
neighbours={this.state.neighbours[item.key.substring(0,1)][item.key.substring(1,2)]}
firstClick={this.props.firstClick}
/>
);
render() {
return (
<FlatList
data={this.state.flatGrid}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
numColumns={10}
/>
);
}
The grid is a flatlist of cells and the grid knows the neighboring cells of each cell when its tapped. The problem I am having is I'm not sure where I should update the state of the tapped cell and its neighboring cells. I would like the isHidden state to be set to false for the cell plus all of its neighbors.
Should it be handled in the grid component or cells component? I'm not sure how to tackle this without breaking encapsulation.
These are the states in my cell Component
constructor(props) {
super(props);
this.state = {
isFlagged: false,
isHidden: true,
value: '',
id: ''
};
Thanks in advance!

Answer 1

Here is something which can make life easier for you.
First of all, your cell should be a PureComponent and you should never store the state in your cell. The sole reason being the cell will be reused at some point and your entire screen might start behaving randomly. You can store the state of each cell model in the data source.
Finally, you should pass a callback function as props to your cell. When the cell is tapped, then calculate the neighboring cells in your Grid component. When this is calculated, then change the appropriate cell models accordingly.
Example
class Grid extends React.Component {
state = {
dataSource: [{
isFlagged: false,
isHidden: true,
value: '1',
id: '1',
}, {
isFlagged: false,
isHidden: true,
value: '2',
id: '2',
}],
};
onCellClicked = (item) => {
// Find neighbouring items and replace the modified items in the state in this function
}
_renderItem = (item) => {
return <Cell onClick={() => this.onCellClicked(item)} item={item}>;
}
render() {
return (
<FlatList data={this.state.dataSource} renderItem={this._renderItem}/>
);
}
}