troubles having my datepicker pasing his value

Question

I'm learning react native and I'm trying to pass a date from my datepicker component to a form but I'm unable to do so. I tried to create the date picker on the form but since my form is on a hook I'm not able to do so.

this is the code of the date picker

import DatePicker from 'react-native-datepicker';
//import DatePicker from the package we installed

export default class MyDatePicker extends Component {

  constructor(props) {
    super(props)
    //set value in state for initial date
    this.state = {
      date: "15-05-2018"
    }
  }


  render() {
    return ( <View style = {
        styles.container
      }>

      <DatePicker date = {
        this.state.date
      } //initial date from state
      mode = "date" //The enum of date, datetime and time
      placeholder = "select date"
      format = "DD-MM-YYYY"
      minDate = "01-01-1900"
      maxDate = "01-01-2019"
      confirmBtnText = "Confirm"
      cancelBtnText = "Cancel"
      androidMode = "spinner"
      onDateChange = {
        (date) => {
          this.setState({
            date: date
          }, console.log({
            date: date
          }))
        }
      }
      />

      </View>
    )
  }
}

the datepicker works, the console log displays the date on a string, the trouble seems to be on my form and the way I get the value

import MyDatePicker from './MyDatePicker';

    const PersonalForm = ({onSubmit, errorMessage}) => {
        const [vName, setvName] = useState('');
        const [vSecondName, setvSecondName] = useState('');
        const [vBirthDate, setvBirthDate] = useState('');

        return ( 
            <ScrollView>
              <View style={styles.buttonContainer}>
                <View style={styles.inputContainer}>
                  <TextInput style={styles.inputs}
                    placeholder="Nombre"
                    underlineColorAndroid='transparent'
                    onChangeText={newvName => setvName(newvName)}
                    value={vName}
                autoCorrect={false}
                autoCapitalize='characters'
              />
            </View>
            <View style={styles.inputContainer}>
              <TextInput style={styles.inputs}
                placeholder="Segundo nombre"
                underlineColorAndroid='transparent'
                onChangeText={newvSecondName => setvSecondName(newvSecondName)}
                value={vSecondName}
                autoCorrect={false}
                autoCapitalize='characters'
              />
              </View>

              <View>
                <MyDatePicker vBirthDate={date} />
              </View>
          </View>
          <View style={styles.buttonContainer2}>
              <TouchableOpacity 
                style={ styles.logout}  
                onPress={() => onSubmit(vName, vSecondName, vBirthDate), console.log(vName, vSecondName, vBirthDate)}
              >
                  <Text style={styles.loginText}>GUARDAR</Text>
              </TouchableOpacity>
          </View>
        </ScrollView>
    );
};

Answer 1

Your state changes inside MyDatePicker but not inside PersonalForm you need to set it inside PersonalForm since you are sending vBirthDate to form inside PersonalForm.
I would suggest changing PersonalForm:.
First import react-native-datepicker at the top, then:
Inside PersonalForm where you have MyDatePicker remove it and add this:

<DatePicker 
      date={vBirthDate} //initial date from state
      mode="date" //The enum of date, datetime and time
      placeholder="select date"
      format="DD-MM-YYYY"
      minDate="01-01-1900"
      maxDate="01-01-2019"
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      androidMode="spinner"
      onDateChange={(date) => setvBirthDate(date)}
    />