Use modal to take user checkbox input and return data back to parent component - react-native

Question

I have a Newevent class component which takes several user inputs. One of them is an array of user ids called access list and the rest is text input. Here is the code I am thinking about:
export default class NewEvent extends React.Component {
state = {
name: '',
access_list: [],
modalVisible: false
};
triggerModal() {
this.setState(prevState => {
return {
display: true
}
});
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Name'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('name', val)}
/>
<Button
onPress = { () => this.triggerModal() }
title = "Open Modal"
color = "orange">
</Button>
<DisplayModal
visible={this.state.modalVisible}
/>
<Button
title='Save'
onPress={this.save}
/>
</View>
)
}
}
In DisplayModal.js, it is a function component to display a series of checkbox allowing user to check which user he wants to include in access list:
import React from 'react'
import { Modal, View, Image, Text, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements'
const DisplayModal = (props) => (
<Modal visible={ props.display } animationType = "slide"
onRequestClose={ () => console.log('closed') }>>
<View>
<CheckBox
title='Click Here1'
checked={this.state.checked}
/>
<CheckBox
title='Click Here2'
checked={this.state.checked}
/>
</View>
</Modal>
)
Any recommendation about constructing DisplayModal.js to return the user's selection?

Answer 1

I'm not sure about the problem but I think that you want to send states from DisplayModal to Newsevent for that purpose at least there are two methods:
1- Using redux which is a little(or too) complicated. you can read the documentation.
2- use a props which is a function that returns data from the child component to the parent.
for example:
export class DisplayModal extends Component {
state = {
item1: false,
item2: false
};
_updateState = item => {
this.setState({ item: !this.state[item] });
// use the getState props to get child state
return this.props.getState(this.state);
};
render() {
return (
<Modal
visible={props.display}
animationType="slide"
onRequestClose={() => console.log("closed")}
>
>
<View>
<CheckBox
title="Click Here1"
checked={this.state.checked}
onPress={() => this._updateState("item1")}
/>
<CheckBox
title="Click Here2"
checked={this.state.checked}
onPress={() => this._updateState("item2")}
/>
</View>
</Modal>
);
}
}
and use the getState props to get user's selections:
<DisplayModal getState={(items)=> this.setState({userSelections:items}) />
after each action on DisplayModal i.e on checkbox press, _updateState call the function the function in props and in your example, the function gets data from the child and update the parent state.