How to send dates from datepicker correctly in React?

1.5k views Asked by At

I have two components. I need to get dates and send it to fetch. In component MainPage I add state for dates values. In component InputForm I add react-data-picker.

When user set dates to datapickers, this values should send to fetch in format 'dd.mm.yyyy' or 'yyyy-mm-dd' (I use dateFormat for change).

In result I have this code for MainPage:

import React, { PropTypes, Component } from 'react';
import dateFormat from 'dateformat';

class ReportPage extends Component {
  constructor(props) {
    super(props);
    this.state = {      
      date1: new Date(),
      date2: new Date()      
    };  
    this.onHandleFetch = this.onHandleFetch.bind(this);
    this.onChangeInputDate1 = this.onChangeInputDate1.bind(this);
    this.onChangeInputDate2 = this.onChangeInputDate2.bind(this);
    this.checkInputs = this.checkInputs.bind(this);    
  }

  handleShowClick() {         // if button clicked 
    if (this.checkInputs()) {     // if dates not null
      this.onHandleFetch(); 
    }
  }

  checkInputs() {
    if (this.state.date1 === null || this.state.date2 === null) {
      return false;
    }   
    return true;
  }

  onChangeInputDate1(d1) {   
    console.log(dateFormat(d1, 'isoDate')); // format yyyy-mm-dd
    this.setState({
      date1: d1     
    });
  }

  onChangeInputDate2(d2) {
    console.log(dateFormat(d2, 'isoDate'));
    this.setState({
      date2: d2
    });
  } 

  onHandleFetch() {    
    fetch(`${Config.baseUrl}/find/${dateFormat(this.state.date1, 'isoDate')}/
    ${dateFormat(this.state.date2, 'isoDate')}`, {
      method: 'GET'
    })
        ...
  }

  render() {
    return (
      <div>        
       <InputForm
         handleChangeInputDate1={this.onChangeInputDate1} handleChangeInputDate2={this.onChangeInputDate2}
         date1={this.state.date1} date2={this.state.date2}
       />
      )
    ...
    }

InputForm:

import React, { PropTypes, Component } from 'react';
import DatePicker from 'react-date-picker';

const propTypes = {  
  date1: PropTypes.string,
  date2: PropTypes.string,
  handleChangeInputDate1: PropTypes.func,
  handleChangeInputDate2: PropTypes.func
};

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.handleOnChange1 = this.handleOnChange1.bind(this);
    this.handleOnChange2 = this.handleOnChange2.bind(this);
  }

  handleOnChange1(date1) {
    this.props.handleChangeInputDate1(date1);
  }

  handleOnChange2(date2) {
    this.props.handleChangeInputDate2(date2);
  }

  render() {
    return (
      <form>
       ...
         <DatePicker onChange={this.handleOnChange1}
           value={this.props.date1}
         />               
         <DatePicker onChange={this.handleOnChange2}
           value={this.props.date2}
         />
       ...
      </form>
    );
  }
}

In result I have this error in console:

Objects are not valid as a React child (found: Wed Oct 17 2018 00:00:00 GMT+0500 (Екатеринбург, стандартное время)).

How can I fix it?

0

There are 0 answers