how to use react-dates in reactjs properly

Question

import React, {Component} from 'react';



import {DateRangePicker, SingleDatePicker, DayPickerRangeController} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class Clients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: '',
      startDate: '',
      endDate: ''
    };
    this.onDatesChange = this.onDatesChange.bind(this)
    this.onFocusChange = this.onFocusChange.bind(this)
  }
  onDatesChange({startDate, endDate}) {

    this.setState({startDate, endDate});
  }

  onFocusChange(focusedInput) {
    this.setState({focusedInput});
  }

  render() {
    const {focusedInput, startDate, endDate} = this.state;

    return (<div className="animated fadeIn">


      <div>
        <DateRangePicker
          onDatesChange={this.onDatesChange} 
          onFocusChange={this.onFocusChange}
          focusedInput={focusedInput}
          startDate={startDate}
           endDate={endDate}/></div>

    </div>);
  }
}

export default Clients;

the errors are : arning: Failed prop type: Invalid input type: startDate of type string supplied to DayPickerRangeController , expected object . in DayPickerRangeController (created by DateRangePicker) in DateRangePicker (created by withStyles(DateRangePicker)) in withStyles(DateRangePicker) (created by Clients) in div (created by Clients) in div (created by Clients) in Clients (created by Route) in Route (created by Full) in Switch (created by Full) in div (created by Container) in Container (created by Full) in main (created by Full) in div (created by Full) in div (created by Full) in Full (created by Route) in Route in Switch in Router (created by HashRouter) in HashRouter

this happens when i click on startdate to pick a date any help ?

Answer 1

The problem was solved using moment library to set startDate

installing moment:

 npm i moment --save
 yarn add moment

import moment at your component:

import moment from 'moment'

set startDate at react-dates with a moment object

startDate={moment()}