React Native- How to pass state from a component to it's parent

Question

I'm building a React Native Application and I'm coming across this issue im not sure how to resolve

In my screen, I have a switch that when pressed, invokes a function:

function RoundTrip(props) {
    console.log('value of round trip' + props.returnBool)
  var roundTrip = props.returnBool;
  if (roundTrip) {
       console.log('return is true')
    return <RoundTripTrue />;
  }
  console.log('return is false')
  return <RoundTripFalse />;

 }

function RoundTripFalse(props) {
  return  null
}

function RoundTripTrue(props) {
    return  (
        <View>
                        <CardSectionInput>


                    <Image
                        source={require('./../../src/images/dateIcon1.png')}
                        style={styles.IconStyle}
                    />
                    <DatePicker
                style={styles.DateStyle}
                date={this.state.returnDate}
                mode='date'

                format="LL"
                minDate= {currentDate}
                maxDate="2018-06-01"
                confirmBtnText="Confirm"
                cancelBtnText="Cancel"
                showIcon={false}
                placeholder= 'Return Date'
                customStyles={{
                dateInput: {
                    marginLeft: 2,
                    backgroundColor: 'white', 
                    borderWidth: 1, 
                    borderRadius: 5, 
                    borderColor: 'white',
                    flex: 1,
                    flexDirection: 'row',
                },
                dateText: {
                    flexDirection: 'row',
                    flex: 1,  
                    backgroundColor: 'transparent',
                    color: 'black',
                },
                placeholderText: {
                    color: '#c9c9c9',
                    alignSelf: 'center',
                    justifyContent: 'flex-start',
                    flex: 1,
                    flexDirection: 'row',
                    fontSize: 18,

            }
                }}
                onDateChange={(returnDate) => {this.setState({returnDate: returnDate})}}
            />


        </CardSectionInput>


        <CardSectionInput>


                    <Image
                        source={require('./../../src/images/timeIcon.png')}
                        style={styles.TimeIconStyle}/>

            <DatePicker
                style={styles.DateStyle}
                date={this.state.returnTime}
                mode="time"
                format="LT"
                confirmBtnText="Confirm"
                cancelBtnText="Cancel"
                minuteInterval={20}
                showIcon={false}
                placeholder='Return Time'
                onDateChange={(returnTime) => {this.setState({returnTime: returnTime});}}
                customStyles={{
                dateInput: {
                    marginLeft: 2,

                    backgroundColor: 'white', 
                    borderWidth: 1, 
                    borderRadius: 5, 
                    borderColor: 'white',
                    flex: 1,
                    flexDirection: 'row',


                },
                dateText: {
                    flexDirection: 'row',
                    flex: 1,  
                    backgroundColor: 'transparent',
                    color: 'black',

                },
                dateTouchBody: {
                    flexDirection: 'row',
                    height: 40,
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    paddingTop: 5,

                },
            placeholderText: {
                    color: '#c9c9c9',
                    alignSelf: 'center',
                    justifyContent: 'flex-start',
                    flex: 1,
                    flexDirection: 'row',
                    fontSize: 18,

            }
                }}
                />

        </CardSectionInput>

This is working correctly, but my issue comes when I try to change my state of my RoundTrip function to my parent.

In my parent, I'm calling <RoundTrip returnBool={this.state.roundTrip} /> I understand that my function doesnt have access to my parent's state, but I am lost on how to tackle this.

This problem is not specific to my RoundTrip function, as I am facing this problems whenever I try to separate my files into components.

Thank you in Advance

Answer 1

An option is to pass the Roundtrip component a callback function of the parent component via a property.

The Roundtrip component so can return values to the parent component.

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} />

The parent's method could look like this:

function parentsMethodThatShallBeCalled(newValueFromRoundTrip) {
   this.setState({roundtrip : newValueFromRoundTrip});

}