REACT NATIVE - Change state of screen when close import modal - reactjs

Question

When I close the modal, I need to detect that it has been closed to change the state of the parent page. Not being able to change it when I change any property of the state, the modal.
ExpertFeedback.js
import ModalExpertFeedback from './ModalExpertFeedback';
export default class ExpertFeedback extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
projects: [{name:'project0', name:'project1'}],
feedback: {title: '', content: '', project_id: ''}
};
}
proveProjectIsntNull() {
if (this.state.feedback.project_id != null){
this.setModalVisible(true);
} else {
this.setModalVisible(false);
Alert.alert('Select a project please');
}
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View>
<View>
<TextInput
placeholder="Write title"
onChangeText={(feedback_title) => this.setState( prevState => ({
feedback: {
...prevState.feedback,
title: feedback_title
}}))
}
value={this.state.feedback.title}
/>
<Picker
selectedValue={this.state.feedback.project_id}
onValueChange={(itemValue, itemIndex) => this.setState( prevState => ({
feedback: {
...prevState.feedback,
project_id: itemValue
}}))
}>
<Picker.Item label="Select a project" value={null} />
{typeof this.state.projects === 'object' && this.state.projects.length && (this.state.projects.map((project, index) => {
return (<Picker.Item label={project.name} value={project.id} />)
}))}
</Picker>
</View>
<ModalExpertFeedback visible={this.state.modalVisible} navigation={this.props.navigation} feedback={this.state.feedback} />
<TouchableOpacity
onPress={() => {
this.proveProjectIsntNull();
}}>
<View>
<Text>SEND NOW</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
ModalExpertFeedback.js
export default class ExpertFeedback extends Component {
feedback = {
title: "",
content: "",
project_id: "",
};
state = {
modalVisible: false
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
componentWillReceiveProps(props) {
this.setState({ modalVisible: props.visible});
this.setState({ feedback: props.feedback });
}
render() {
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => { console.log('close') }} >
<View>
<TouchableOpacity
onPress={() => {
this.setModalVisible(false);
}}
>
<View>
<Text>Close</Text>
</View>
</TouchableOpacity>
</View>
</Modal>
</View>
)
}
}
When I change feedback.title with TextInput in ExpertFeedback, the Modal opens

Answer 1

If you want to 'connect' the Parent and the Child, you'll need to pass a handler, essentially a function as a prop from your Parent to your child.
Example below:
ExpertFeedback.js
parentHandler(result){
//do your update here
this.setState({result});
}
<ModalExpertFeedback
visible={this.state.modalVisible}
navigation={this.props.navigation}
feedback={this.state.feedback}
handler={this.parentHandler.bind(this)} />
ModalExpertFeedback.js
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => { this.props.handler(someValue) }} >