question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[10.0.0-alpha.3] Component's onClick property should be a function

See original GitHub issue

React alpha.3 is quite strict with type handling of components. I have a bunch of new errors for when it expects a function but gets an object or undefined back.

Uncaught (in promise) Error: Component's "onCancel" property should be a function, but got [object] instead

debug.module.js:1 Uncaught (in promise) Error: Component's "onFocus" property should be a function, but got [undefined] instead

Is this as expected? It would be fine if it were just in my code as I could fix it to never use onCancel={null}, but I’m getting errors back for dependencies I’m using, forcing me to add something like onFocus={()={}} even if I would prefer not to pass in that prop at all.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
bardcommented, Apr 11, 2019

@marvinhagemeister it still catches false positives, e.g. in reactjs-popup where the Popup component has an on property that expects an array.

I stumbled on this because a component I wrote had a boolean property named online. It was quite puzzling that Preact required it to be a function; even more puzzling when it started working after renaming it to isOnline.

Perhaps the check at: https://github.com/developit/preact/blob/078e316c66812bb59d6fb80f74fa7039006eb371/debug/src/debug.js#L64

…could be made to check that the third letter is an uppercase character? Or print a warning instead of throwing an error?

1reaction
marvinhagemeistercommented, Apr 6, 2019

@jessicabyrne as promised we published alpha 4 which includes the fix for this issue 🎉

Read more comments on GitHub >

github_iconTop Results From Across the Web

[10.0.0-alpha.3] Component's onClick property should be a ...
React alpha.3 is quite strict with type handling of components. I have a bunch of new errors for when it expects a function...
Read more >
Expected onClick listener to be a function, instead got type ...
The problem is that you're invoking the function immediately and then what's left is the return value, which might not be a function!...
Read more >
How to Use React onClick Events in Class and Functional ...
In this article, we'll cover the basics of React onClick events and we'll learn to handle click events in class and functional components....
Read more >
Add React Component onClick - CodeSandbox
CodeSandbox is an online editor tailored for web applications.
Read more >
React onClick event handlers: A complete guide
Learn the basics of React's onClick event handler, including event listening, onClick buttons, synthetic events, custom events, and more.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found