Reset all the state of child and parent class by a button in the parent class - React native - react-native

Question

I've a parent class with its child classes. When the child class is clicked, its id is passed to parent class and the bg color of the child is changed.
I want to reset all the state and bgColor of child class by clicking the button in the parent class. How can I achieve it?
Thanks in advance.
Parent class:
getSelectedChilds = (id) => {
const items = this.state.selectedIds.filter(item => item.id !== id);
this.setState({
selectedIds: [...items]
});
}
render() {
return(
<View>
<FlatList
data={data}
renderItem={({ item, index }) => <Child getSelectedChilds={this.getSelectedChilds} item={item} />}
/>
<Button
onPress={() => {
// how to reset all the states (parent & child) by clicking this button?
}}
title="Submit"
/>
</View>
)
}
Child class
export default class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
selectChild: false
}
}
selectedChild = (id) => {
this.setState({
selectChild: !this.state.selectChild
});
this.props.getSelectedChilds(id);
}
render() {
const { item } = this.props;
return (
<View style={{ flex: 1 }}>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
this.selectedChild(item.id);
}}>
<View style={[{ backgroundColor: this.state.selectChild ? 'red' : 'transparent' }]}>
<View style={{ flexDirection: 'row' }}>
<Text>{item.name}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
}
}
What I did so far:
I used refs to access the function of child. It works but the state of child classes can not be changed, and hence bgColor is red all the time.
Parent class
constructor(props) {
super(props);
this.child = React.createRef();
}
resetAll = () => {
this.setState({
selectedIds: [...items]
});
this.child.current.reset(); // this is not working properly
}
render() {
return(
<View>
<FlatList
data={data}
renderItem={({ item, index }) => <Child ref={this.child} getSelectedChilds={this.getSelectedChilds} item={item} />}
/>
<Button
onPress={() => {
this.resetAll()
}}
title="Submit"
/>
</View>
)
}
Child class
reset = () => {
alert('abc'); //the alert works but the line after this doesn't work and the bg color is unchanged.
this.setState({
selectChild: false
});
}
render() {
const { item } = this.props;
return (
<View style={{ flex: 1 }}>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
this.selectedChild(item.id);
}}>
<View style={[{ backgroundColor: this.state.selectChild ? 'red' : 'transparent' }]}>
<View style={{ flexDirection: 'row' }}>
<Text>{item.name}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
}

Answer 1

You could just pass a boolean in your child to tell him to reset its own state. Something like :
const resetAll = () => {
this.setState({
// ... whatever you want,
resetChild: true
});
}
And then
<Child shouldReset={this.state.resetChild} />
By cliking on your button, you will trigger a re-render in your child and this child will handle its own state.