React 16 "Expected onClick listener to be a function, instead got a value of boolean type"

[steveliles]

I just updated to React 16 and now I'm seeing lots of warnings from react-json-tree (via redux-log-monitor):

warning.js:35 Warning: Expected `onClick` listener to be a function, instead got a value of `boolean` type.
    in span (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONNestedNode)
    in ul (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONTree)
    in ul (created by JSONTree)
    in JSONTree (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in LogMonitorEntry (created by LogMonitorEntryList)
    in div (created by LogMonitorEntryList)
    in LogMonitorEntryList (created by LogMonitor)
    in div (created by LogMonitor)
    in div (created by LogMonitor)
    in LogMonitor (at ReduxDevTools.js:13)`

I believe this is due to the DOM attribute changes in React 16, specifically the "Non-boolean attributes with boolean values" described here - https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html.

And in react-json-tree the culprit is src/JSONNestedNode.js:

        <span
          {...styling('nestedNodeItemString', ...stylingArgs)}
          onClick={expandable && this.handleClick}
        >

Where {expandable && this.handleClick} will evaluate to false if expandable is false.

[GuillaumeCisco]

Just created a PR for fixing this issue here : #97

redux-devtools-log-monitor depends of it.
Should be great to deploy it as soon as possible.

[danbovey]

There was already a PR open for this #95

But I like @GuillaumeCisco solution better, it makes sense to put the if in the handleClick function.

[GuillaumeCisco]

Can we merge it, so?

[arman-mukatov]

what in the end decided? I get the same warning..

[GuillaumeCisco]

@arman-mukatov With which code?

[rsolomon]

@alexkuz any chance you can merge and release this?

[rsolomon]

Heads up for anyone else blocked by this: I released a forked version of this package with the React 16 fix under @rsolomon/react-json-tree@0.10.10 via https://github.com/rsolomon/react-json-tree

Feel free to submit PRs there as well, until we get confirmation that this repository is still maintained.

[alexkuz]

I'll try to review this and other PRs this weekend.
BTW if anyone is willing to maintain this repo (as I'm obviously failing to do this lately), please let me know.
Thanks, everyone!

[GuillaumeCisco]

Can we have some hope of a merge here followed by a release?

[MrSauceman]

Yes, please release this. This error spams my console over and over to the point that I had to disable DevTools.

[sovanna]

going to disable devTools too, waiting the release

[alexkuz]

Published in v0.11.0, sorry it took so long.

[foxhound87]

Sorry @alexkuz , I'm still getting Warning: Expected onClick listener to be a function, instead got false.

Warning: Expected `onClick` listener to be a function, instead got `false`.

If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.
    in label (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONArrayNode)
    in JSONArrayNode (created by JSONNode)
    in JSONNode (created by JSONNestedNode)
    in ul (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONNestedNode)
    in ul (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONTree)
    in ul (created by JSONTree)
    in JSONTree (created by _class)

[GuillaumeCisco]

@foxhound87, the issue is now in the redux devtools repo, please upvote it

[foxhound87]

@GuillaumeCisco I'm not using redux devtools

[GuillaumeCisco]

@foxhound87 So there is surely another part of the code that do this.
Can you try to spot it using breakpoints?
Or maybe you can share a project that highlights this behavior.

[foxhound87]

I’m using the package in this project:
https://github.com/foxhound87/mobx-react-form-demo

[foxhound87]

UP