How to get Date from “react-native-datepicker” in Child-Component?

Question

This is my first question about react native. I am creating React Native App as a beginner.

I am using "react-native-datepicker" ( https://github.com/xgfe/react-native-datepicker ) for getting Date in Child-Component and I want to store this Date into Firebase. However, I couldn't get this Date which each user input on picker.

So, how to do this?

Below one is Parent-Component

class PersonalInfo1 extends React.Component {
  state = {
  fromTermOfMaridge: '',
  ToTermOfMaridge: '',
}
handleOnpress() {
  const db = firebase.firestore();
  const { currentUser } = firebase.auth();
  db.collection(`users/${currentUser.uid}/form1`).add({
   form1 :
    [  
     { fromTermOfMaridge: this.state.fromTermOfMaridge },
     { ToTermOfMaridge: this.state.ToTermOfMaridge },
    ]
  })
  .then(() => {
    this.props.navigation.goBack();
  })
  .catch((error) => {
    console.log(error);
  });
}

render() {
  return (
   <ScrollView style={styles.container}>
     <InfoHeader
      navigation={this.props.navigation}>申請者情報１ 
     </InfoHeader>

     <Notes />

     <View style={styles.questionTextBoxDateMargin}>
      <QuestionTextBoxDate 
        onDateChange={(date) => 
        { this.setState({ fromTermOfMaridge: date }); }}>
           婚姻期間（上記で既婚・離婚と答えた方)
      </QuestionTextBoxDate>

      <QuestionTextBoxDate onDateChange={(date) => 
        { this.setState({ ToTermOfMaridge: date }); }}>
         から
      </QuestionTextBoxDate>
     </View>

    <SubmitButton
      style={styles.saveButton} 
      onPress={this.handleOnpress.bind(this)}>
       保存
      </SubmitButton>

    <Copyrights />

  </ScrollView>
 );
 }
}

Next one is Child-component

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import DatePicker from 'react-native-datepicker';

class QuestionTextBoxDate extends React.Component {

constructor(props) {
  super(props)
  this.state = {
   date : '',
 };
}

render() {
  return (
    <View style={styles.container}>
      <View style={styles.questionTextBox}>
        <Text style={styles.questionText}>
        {this.props.children}
      </Text>
    </View>

    <DatePicker
      style={styles.datePicker}
      date={this.state.date}
      mode="date"
      locale="ja"
      placeholder="年月日を入力"
      format="YYYY年MM月DD日"
      minDate="1900-01-01"
      maxDate="2020-01-01"
      confirmBtnText="確定"
      cancelBtnText="閉じる"

      customStyles={{
        dateInput: {
          height: 30,
          backgroundColor: '#F4F4F4',
          borderWidth: 1,
          borderRadius: 6,
          borderColor: '#707070',

        }

      }}
      showIcon={false}
      onDateChange={(date) => { this.setState({ date }); }}
    />
  </View>
);

} }

Answer 1

In DatePicker component change onDateChange method to the one as given below

<DatePicker
      style={styles.datePicker}
      date={this.state.date}
      mode="date"
      locale="ja"
      placeholder="年月日を入力"
      format="YYYY年MM月DD日"
      minDate="1900-01-01"
      maxDate="2020-01-01"
      confirmBtnText="確定"
      cancelBtnText="閉じる"

      customStyles={{
        dateInput: {
          height: 30,
          backgroundColor: '#F4F4F4',
          borderWidth: 1,
          borderRadius: 6,
          borderColor: '#707070',

        }

      }}
      showIcon={false}
      onDateChange={(date) => { this.props.onDateChange && this.props.onDateChange(date);this.setState({ date }); }}
    />