React-date-picker: Error: MonthInput.render() doesn't return something proper

Created on 2 Mar 2018 · 15Comments · Source: wojtekmaj/react-date-picker

Uncaught Error: MonthInput.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. at invariant (invariant.js:42) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:828) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:361) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) at Object.mountComponent (ReactReconciler.js:47) at ReactDOMComponent.mountChildren (ReactMultiChild.js:240) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:699) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:524) at Object.mountComponent (ReactReconciler.js:47) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) at Object.mountComponent (ReactReconciler.js:47) at ReactDOMComponent.mountChildren (ReactMultiChild.js:240) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:699) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:524) at Object.mountComponent (ReactReconciler.js:47)

I use it the exact same basic way it was recommended in here. Any idea what might be causing this?

bug help wanted

Source

ioandantataru

All 15 comments

Update:
I tried this in a separate app and it works only when I use version 6.8.2 with react 16. It still doesn't work when using version 6.7.0 with react 15.3.2.

On my app tho, I get the same error even after updating to react 16.

ioandantataru on 2 Mar 2018

Hmmm... That is odd. Indeed, newest versions of react-date-picker will only work properly with React 16. But I don't see anything in the code that could have caused this issue in version 6.7.0 on React 15... MonthInput returns an input component no matter what.

wojtekmaj on 5 Mar 2018

Same issue using React 15.6.1 with example from README.md

@wojtekmaj

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

class MyApp extends Component {
state = {
date: new Date(),
}

onChange = date => this.setState({ date })

render() {
return (

onChange={this.onChange}
value={this.state.date}
/>

);
}
}

debovis on 5 Mar 2018

😕1

@debovis By "basic example" you mean /sample catalog of this repo without any changes?

wojtekmaj on 7 Mar 2018

Just got around the v6.7.0 issue myself. The workaround is to run

npm install [email protected] --save --save-exact

The problem is that the package.json shows a dependency on react-calendar@^2.11.0. The error returned from using DatePicker is something like "'_locales.setLocale' is not a function". From what I could tell, setLocale was a shared function taken from react-calendar. Something has changed in react-calendar since then, but because react-date-picker isn't asking for an exact version match, npm is grabbing the latest react-calendar v2.., which doesn't have the setLocale function, or doesn't have it in the right place.

ghost on 17 Mar 2018

...which is odd as we have package-lock.json to prevent just that. :/ But that's actually entirely different problem. In which reinstalling the package should work just fine. Discussed in #56.

wojtekmaj on 17 Mar 2018

Guys, please retest v6.9.1 or higher. The problem should have been resolved.

wojtekmaj on 4 Apr 2018

@wojtekmaj I'm seeing this problem with v6.10 using React v15.6.1 still