React-calendar: onChange function is not triggered on React 15.x

[kleberpinel]

Hello @wojtekmaj

I am using your library in a pretty vanila way, but the call back onChange is never called when I select something a date in my calendar. Take a look:

Any idea? My version in my package.json is "react-calendar": "^2.13.0"

[sgnl]

Curious as to what the errors above the "rendering" log?

[sgnl]

Try these and see if one of them helps you:

change your changeSelectedDate to this syntax (instead of the arrow syntax):

    changeSelectedDate(date) {
        // your console log here
    }

or...

onChange={() => this.changeSelectedDate}

or ...

Keeping the code the same but in your constructor bind your method to the instance, aka: this.changeSelectedDate = this.changeSelectedDate.bind(this)

[kleberpinel]

Hey @sgnl, I just tried all of them, none looks to be working.

the rendering log is just to show that is passing through that code and is rendering the component.

Any other suggestion ?

[sgnl]

Could you post up the example on https://codesandbox.io/ ?

I see that the docs have similar code but thanks for trying my suggestions anyway 👍

[sgnl]

This seems to work: https://codesandbox.io/s/l96wjl78mm

and so does this: https://codesandbox.io/s/l194xo9mq

Do you have any other events on the page? Or what does the other files look like? If you can, try to reproduce it in codesandbox

[jdebarochez]

I had the same issue. Updating my React dependencies solved the issue. However, I do not explain why it didn't work in the first place.

Thanks @sgnl for the links. It helped found the differences.

[wojtekmaj]

Hmmm. There were no breaking changes between React 15.x and 16.x in our case as React did not throw any warnings.

Is the sample I wrote working for you? If not, are there any errors? What do they say? If the sample works, check the differences please! Maybe there's something hard to see for an eye (Babel doing some magic?). React version really shouldn't mattter as long as it's >=15.5.

[kleberpinel]

The react version in my project is 15.4.2.. you just said that it should work do >= 15.5.0 .... Have you tested before for this version (15.4.2) ? I forked you project, ran yarn and yarn start from the sample project and I'm getting react-calendar/sample/Sample.jsx:3:21: Cannot resolve dependency 'react-calendar'

[wojtekmaj]

I did not test it in earlier versions and I don't think they will ever be supported. 15.5 is, at the moment, the oldest version that has a lot in common with the newest versions, mostly because of PropTypes.

The error says something else though. Most likely you will need to adjust package.json to include react-calendar from npm, not from ../ as it is there. Try writing "react-calendar": "latest" instead!

[kleberpinel]

Hey @wojtekmaj thanks for your support but I had to do an work around with tileContent...

<div
  className="click-event-day"
  onClick={this.changeSelectedDate}
  data-day={formatedDate} />

and

changeSelectedDate = (event) => {
  const day = event.target.dataset.day
  const selectedDate = moment(day, 'YYYY-MM-DD').toDate()
  this.props.changeSelectedDate(selectedDate)
}

It might not be the correct lib solution, but works :) ... If I have time, I'll try to investigate better why its not working the trigger

[yummyelin]

Same issue here.
Change to using 'onClick', 'onClickDay', still not working.

"react": "^15.5.0",
"react-calendar": "^2.13.1",

[wojtekmaj]

All,
I have tested sample and test suites of this repo with multiple versions of React. They definitely do work. If you could share minimal reproduction repo it would be much appreciated.

[devsli]

Here the faulty example: https://codesandbox.io/s/2kz06l3p0

The only difference here is React and ReactDOM are of 15.6.1 version

[wojtekmaj]

Hmm. This is very odd. I'm calling setState properly and it updates the value internally, but setState callback does not fire. I filed an issue in React and I hope they will shed some light on it...

facebook/react#12354

[wojtekmaj]

@kleberpinel, @devsli,
would you please share your output from npm list --depth=1? I have a feeling what might be the problem... Actually you may have React installed twice for some reason, despite React-Calendar's package.json declaring compatibility with React >=15.5... If that's the case, I know what I can do about it.

[devsli]

{ ... }
+-- [email protected]
| +-- [email protected] deduped
| +-- [email protected] deduped
| +-- [email protected] deduped
| +-- [email protected] deduped
| `-- [email protected] deduped
+-- [email protected]
+-- [email protected] invalid
| +-- [email protected] deduped
| +-- [email protected] deduped
| +-- [email protected] extraneous
| `-- [email protected] extraneous
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected] deduped
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected] deduped
| `-- [email protected]
+-- [email protected]
| +-- [email protected] deduped
| +-- [email protected] deduped
| +-- [email protected] deduped
| `-- [email protected] deduped
{ ... }

Is it enough?

[wojtekmaj]

Yes, thank you! Exactly what I suspected. I wrote to npm support on how to handle this, will keep you updated.

[devsli]

I think you can try the peer dependency

[wojtekmaj]

Thank you. I am aware of this, but at the same time I need React for development/unit tests, and I'm quite confused on how to handle this, will try today evening.

[wojtekmaj]

@devsli, @kleberpinel, @yummyelin
I believe the issue has been resolved in version 2.13.4. Thank you SO much for your patience. You helped me a lot. Please confirm if the fix works for you - although it does here :) https://codesandbox.io/s/r0989558l4