React-calendar: Navigation doesn't work.

[Naahuel]

Hello! Love the plugin, but can't get it to work correctly.

I'm using create-react-app and I'm not sure if that's the problem. Here's my package.json

{
  "name": "sh-calendar-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-calendar": "^2.15.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

All I did was create a new app, delete the default App and just paste the example code:

import React, { Component } from 'react';
import Calendar from 'react-calendar';

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

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

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

I get a working calendar as expected. The onChange method works fine. But I can't change the month or the year. The arrow navigation does nothing. And If I click on the title, it changes the view correctly (year, century, etc) but the arrows continue to not work and no matter what year or month I select, it falls back to the date in value.

[Naahuel]

Update: downgrading to 2.13.5 fixes the issue.

[balazsorban44]

same problem here

[basarevych]

downgrading to that version did help. thanks

[Naahuel]

Another thing I should add is that the sample in /sample does not work either.

Steps to reproduce:

1.- Clone repository
2.- cd to sample/
3.- npm install
4.- npm start
5.- Open http://localhost:1234 on your browser.

Should show a Calendar working, except that I can't change the year or month.

Edit:
It seems the problem came when componentWillReceiveProps was changed to getDerivedStateFromProps in Calendar.jsx in 3d78f704c7d8c13ab7da40384cf66a898acc8202.

I do not fully understand getDerivedStateFromProps yet, but peeking on the state transitions it seemed like activeStartDate was being set correctly in prevState but then it's brought back to its original value. Somehow, doing this fixes the problem:

diff --git a/src/Calendar.jsx b/src/Calendar.jsx
index a6cbd68..4bdb92f 100644
--- a/src/Calendar.jsx
+++ b/src/Calendar.jsx
-    return nextState;
+    return Object.assign({}, nextState, prevState);

[elboletaire]

Same here. Downgrading works, but the patch from @Naahuel doesn't work for me.

[wojtekmaj]

Guys,
this change was caused by a breaking change in minor version (!) of React 16.4. I'm working on a fix as I write. You should be able to resolve the issue by downgrading to React 16.3 or by wait for my hotfix.

Details

activeStartDate was calculated every time props were changed. It was then saved in component's state, and updated by Navigation component when you clicked the arrows. This was fine until Facebook has changed the behavior.
From React 16.4 getDerivedStateFromProps is called on setState as well. Now, to make it work with React 16.4, activeStartDate will be updated when _props which affect activeStartDate_ were changed.

[wojtekmaj]

The issue has been fixed. Please refer to #78 for more details.