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?