score:-3

You're not initlizing state properly. You should use a constructor, like so:

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

export default class ExpenseForm extends React.Component {
  constructor(props){
      super(props);
      this.state = {
         createdAt: moment(),
         calenderFocused: false
      }
  }

  onDateChange = (createdAt) => {
    this.setState(() => ({ createdAt }));
  };

  onFocusChange = ({ focused }) => {
    this.setState(() => ({ calenderFocused: focused }));
  };

  render() {
    return (
      <div>
        <form>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendcalenderFocused}
            onFocusChange={this.onFocusChange}
          />
        </form>
      </div>
    );
  }
};

score:1

import 'react-dates/initialize';

As of v13.0.0 of react-dates, this project relies on react-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to import react-dates/initialize to set up class names on our components.

Ref: https://github.com/airbnb/react-dates

score:12

I got the same error in my tests and adding import 'react-dates/initialize'; fixed it.

Refer to https://github.com/airbnb/react-dates#initialize


Related Query

More Query from same tag