Pass data from a component to parent screen

Question

I installed https://www.npmjs.com/package/react-native-modal-dropdown to have the drop-down functionality. I made a component of my own called DropDown.js which has a Text and the ModalDropdown which I just installed and its implementation is:

function DropDown({ title, options }) {

    const [noOfInd, setNoOfInd] = useState(1);

    return (
        <View>

            {/* npm i https://github.com/siemiatj/react-native-modal-dropdown */}

            <Text style={styles.fieldTitle}>{title}</Text>
            <ModalDropdown
                options={options}
                defaultIndex={0}
                defaultValue={options[0]}
                style={styles.dropDownField}
                textStyle={{ fontSize: 14, }}
                dropdownStyle={styles.dropDown}
                dropdownTextStyle={{ color: color.black, fontWeight: 'bold' }}
                dropdownTextHighlightStyle={{ color: color.linkColor }}
                onSelect={(index, value) => {
                    setNoOfInd(value)
                }} />
        </View>
    );
}

I use this component where I want to display a dropdown throughout the app. Now I want to get the value of noOfInd back. For example, I've another class UserInfoScreen.js:

function UserInfoScreen({ navigation }) {
            <DropDown 
              title={'Select Number of individuals'}
              options={['1', '2', '3', '4', '5']} 
            />

            <MainActionButton title={'Continue'} pressEvent={() => {
                navigation.navigate('Individuals Infomation', {
                    totalIndividuals: 3,
                });
            }} />
}

Here where it says totalIndividuals: 3 I want to pass the value of noOfInd instead of 3. So, how do I get that?

Answer 1

Try with a function like this

function UserInfoScreen({ navigation }) {
     const [selectedOption, setSelectedOption] = React.useState(1);
     ....

            <DropDown 
              title={'Select Number of individuals'}
              options={['1', '2', '3', '4', '5']} 
              onSelectOption = {(item) => setSelectedOption(item)} //function to get selected option
            />

            <MainActionButton title={'Continue'} pressEvent={() => {
                navigation.navigate('Individuals Infomation', {
                    totalIndividuals: selectedOption,
                });
            }} />
}

In dropdown class

function DropDown({ title, options,onSelectOption }) {

    const [noOfInd, setNoOfInd] = useState(1);

    return (
        <View>

            {/* npm i https://github.com/siemiatj/react-native-modal-dropdown */}

            <Text style={styles.fieldTitle}>{title}</Text>
            <ModalDropdown
                options={options}
                defaultIndex={0}
                defaultValue={options[0]}
                style={styles.dropDownField}
                textStyle={{ fontSize: 14, }}
                dropdownStyle={styles.dropDown}
                dropdownTextStyle={{ color: color.black, fontWeight: 'bold' }}
                dropdownTextHighlightStyle={{ color: color.linkColor }}
                onSelect={(index, value) => {
                    setNoOfInd(value)
                    onSelectOption(value) //call the function
                }} />
        </View>
    );
}