Get a value of input in a component react native

Question

I have a problem in react native to get the value of input in date component:

my files:

main.js:

const DatePicker = require('./DatePicker');
    render(){
        return (
         <DatePicker defaultDate={defaultDate} minDate="01/01/1970" />
        )
    }

DatePicker.js:

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'
    class MyDatePicker extends Component {
        constructor(props){
            super(props)
            this.defaultDate = props.defaultDate;
            this.minDateProp = props.minDate;
            this.state = {date:this.defaultDate}
        }

        render(){
            return (
                <DatePicker
                    style={{flex:1, marginLeft: 8}}
                    date={this.state.date}
                    mode="date"
                    format="DD/MM/YYYY"
                    minDate={this.minDateProp}
                    maxDate={this.defaultDate}
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    customStyles={{
                        dateText: {
                            color: '#2471ab',
                            fontSize: 15
                        }
                    }}
                    onDateChange={(date) => {this.setState({date: date})}}
                />
            )
        }
    }

Now when I pick a date it changes the text in and everything well, but how can I store the result when I submit the form? Thanks for any advice.

Answer 1

You are actually storing it in State :

onDateChange={(date) => {this.setState({date: date})}}

If you are going to navigate to another page, you can pass it through props. assuming you're using react-native-router-flux for navigation :

Actions.componentNameToNavigate({ selectedDate: this.state.date });

If you're not navigating to another page and just want to submit it in same page, do something like this :

import React, {Component} from 'react';
import MyDatePicker from './MyDatePicker';

class FormContainer extends Component {
  constructor(props) {
    super(props);
    const date = Date.now();
    this.state = {
      date: `${date.getDay()}/${date.getMonth()}/${date.getYear()}`
    };

    /* this.submit = this.submit.bind(this); */
    // no need to bind it here if you use
    //this.functionName();
  }

  submit(date) {
    // instead of reading it from state, you can pass the date to submit function. that way you dont even need to store it in state
  }

  render() {
    return (
      <form>
        <MyDatePicker 
          date={this.state.date}
          onDateChange={(date) => {
      this.setState({date});
      this.submit(date);
      /// you can pass date as well as accessing it from state
    }
  } />
        <button onClick={this.submit}>Submit date</button>
      </form>
    );
  }
}

Hope it helps.

Answer 2

There are many approaches how you can do that. One of them (which I personally prefer) is to change your custom MyDatePicker in a way to make it "presentational" component (read more about it here: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.sphuynwa2), i.e.:

import React, {PropTypes} from 'react';
import DatePicker from 'react-native-datepicker';

const customStyles = {
  dateText: {
    color: '#2471ab',
    fontSize: 15
  }
};

const style = {
  flex:1,
  marginLeft: 8
};

function MyDatePicker(props) {
  return (
    <DatePicker
      style={style}
      date={props.date}
      mode="date"
      format="DD/MM/YYYY"
      minDate={props.minDate}
      maxDate={props.defaultDate}
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      customStyles={customStyles}
      onDateChange={props.onDataChange} />
  );
}

MyDatePicker.propTypes = {
  minDate: PropTypes.string,
  maxDate: PropTypes.string,
  date: PropTypes.string
};

export default MyDatePicker;

This approach will help you to store your state at the level of "container" component (or redux / mobx / whatever). For example:

import React, {Component} from 'react';
import MyDatePicker from './MyDatePicker';

class FormContainer extends Component {
  constructor(props) {
    super(props);
    const date = Date.now();
    this.state = {
      date: `${date.getDay()}/${date.getMonth()}/${date.getYear()}`
    };

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

  submit() {
    // submit this.state to the server
  }

  render() {
    return (
      <form>
        <MyDatePicker 
          date={this.state.date}
          onDateChange={(date) => this.setState({date})} />
        <button onClick={this.submit}>Submit date</button>
      </form>
    );
  }
}

Of course, it's just a rough implementation, but it illustrates the approach.