How to update TextInput with DateTimePicker value? react native

Question

I am trying to implement https://github.com/react-native-datetimepicker/datetimepicker. I create TextInput where I want to select date and display it into this TextInput but there is nothing happens. I dont have a clue how to do it.

Here is my code:

Main component code:

constructor(props) {
    super(props)
    this.state = {
      text: '',
      show: false,
      timestamp: new Date(1598051730000)
    };
  }

dateChange = (event, selectedDate) => {
        let newDate = new Date(selectedDate);
        let month =
          newDate.getMonth() < 9
            ? '0' + (newDate.getMonth() + 1)
            : newDate.getMonth() + 1;
        let date =
          newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
        let dateText = newDate.getFullYear() + '-' + month + '-' + date;
        this.setState({
          text: dateText,
          timestamp: selectedDate,
          show: false
        })
        console.log(this.state.text)  
      }

render() {
          return (
            <View>
              <View style={{backgroundColor: 'purple', height: '100%'}}>
                <View>
                  <MyTextInput
                    btn={1}
                    placeholder={'test'}
                    isDateTime={true}
                    onChangeText={(value) => this.setState({text: value})}
                    onFocus={this.inputType}
                    value={this.state.text} />
                  
                  {this.state.show && (
                    <DTPicker
                      onChange={this.dateChange} 
                      value={this.state.timestamp} />
                  )}
                </View> 
              </View>     
            </View>
          )
      }

TextInput code:

export function MyTextInput(props) {
    const btn = props.btn;

    return (
        <View style={btn ? styles.container : styles.container2}>
            <TextInput
                style={btn ? styles.input : styles.input2}
                onChangeText={(value) => props.onChangeText(value)}
                placeholder={props.placeholder}
                onFocus={props.onFocus}
                showSoftInputOnFocus={props.isDateTime ? false : true} /> 
            
        </View>
    );
}

DateTimePicker code:

export function DTPicker (props) {
    return (
        <View style={styles.container} >
            <DateTimePicker
                onChange={props.onChange} 
                value={props.value}
                mode={'date'}
                is24Hour={'true'} />
        </View>
    )
}

What I should change or add to get TextInput which is updating after selecting date in DTPicker? console.log from dateChange() function is displaying proper value but TextInput is not updating:

ReactNativeJS: 2020-08-19

Answer 1

You don't have the value prop binded to the TextInput Component.

export function MyTextInput(props) {
    const btn = props.btn;

    return (
        <View style={btn ? styles.container : styles.container2}>
            <TextInput
                style={btn ? styles.input : styles.input2}
                onChangeText={(value) => props.onChangeText(value)}
                placeholder={props.placeholder}
                onFocus={props.onFocus}
                value={props.value} // Bind the value here like this.
                showSoftInputOnFocus={props.isDateTime ? false : true} /> 
            
        </View>
    );
}