Pass state from child to parent React Native

Question

I want to pass the selected date (child component) into my form (parent component). I use react-native-datepicker dependency. I have child component

export default class MyDatePicker extends Component {
    constructor(props){
    super(props)
    this.state = {
        date: moment().format("YYYY MM DD")
    }
} 
  render(){

    return (
      <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        ...
        //styles
        ...
        onDateChange={(date) => {this.setState({date: date})}}
      />
    )
  }
}

and parent component

export default class Footer extends Component {
    constructor(props){
        super(props)
        this.state = {
            sum:'',
            modalOpen: false,
            // monthYear: moment().format("MMMM YYYY")
            monthYear: ''
        }

        this.submitForm = this.submitForm.bind(this);
    }

    submitForm(){
        this.props.submitHandler(this.state.sum, this.state.monthYear);
        this.setState({ modalOpen: false });
    }

    render () {
        return (
            <View style={styles.footer}>
              //some code
                <MyPopup visible={this.state.modalOpen}>
                    <View style={styles.modal}>
                        // some code
                        <MyDatePicker  
                            //here child component
                            value={this.state.monthYear}
                        />
                        <Button style={styles.button} onPress={this.submitForm} title='Add your sum' />
                    </View>
                </MyPopup>
            </View> 
        );
    }
}

I tried different methods but either undefined or something else. How can I get the correct selected date in my Parent submit form? Any suggestions? thanks

Answer 1

The way you do what you want in React is by passing a handleChange function to MyDatePicker and then, inside that component, you should call that function by passing it to the onDateChange .

You basically lift your state from MyDatePicker to your Footer component and control that state via the handleChange function.

Inside your Footer :

this.state = {
  sum:'',
  modalOpen: false,
  // monthYear: moment().format("MMMM YYYY"),
  monthYear: '',
  date: moment().format("YYYY MM DD") // Notice I added this
}

// More code here

handleChange(value) {
  this.setState({date: value})
}

In your render:

<MyDatePicker  
    //here child component
    value={this.state.date}
    handleChange={this.handleChange}
/>

And in MyDatePicker (which can now be a functional component):

function MyDatePicker(props) {
  return (
    <DatePicker
       style={{width: 200}}
       date={props.value} // I'm passing the date (value) from props instead of keeping the state
       mode="date"
       placeholder="select date"
       format="YYYY-MM-DD"
       ...
       //styles
       ...
       onDateChange={(date) => {props.handleChange(date)} // I added this
    />
}