Cannot read property 'getBoundingClientRect' of undefined
See original GitHub issueI’m not sure how to reproduce it, but we just got a report for the above error on the line:
https://github.com/captivationsoftware/react-sticky/blob/master/src/sticky.js#L69
return this.refs.placeholder.getBoundingClientRect().top;
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:34 (14 by maintainers)
Top Results From Across the Web
Cannot read property 'getBoundingClientRect' of null
I get this error: Cannot read property 'getBoundingClientRect' of null . I use this function getBoundingClientRect , because in my project I ...
Read more >Throwing Cannot read property 'getBoundingClientRect' of ...
The error keeps coming from Sentry from a user using windows xp and chrome v49.0.2623, and several users using windows 10 and Edge...
Read more >Error: Uncaught TypeError: Cannot read property ... - Odoo
Hello all! My Odoo community v14 on Ubuntu 20.04 got a client error as below: I don"t know what's wrong, it was working...
Read more >TypeError: Cannot read property 'getBoundingClientRect' of ...
Hi Shreekumar, Greetings from Syncfusion forum. We have confirmed that the behavior is an issue from our side and logged a bug for...
Read more >scrollTo() results in "Uncaught (in promise) TypeError - Wix.com
.scrollTo() results in "Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of null".
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
No longer relevant with 6.x
I see a few problems off the bat @gregoralbrecht, here’s a working sandbox https://codesandbox.io/s/9op7mw8v4y
One of the problems is what the warning is telling you.
Stateless function components cannot be given refs
, so whenSticky
tries to get a ref of the rendered component to measure, it ends up withundefined
, ultimately giving you the error on this issue. You can fix that by using a class component.Another problem is that you’re not taking in the
style
argument from theSticky
callback, which is the mechanism used to actually make the component stay where it is. The callback needs to be({ style }) =>
at the bare minimum to work, and your ActionBar component needs to pass thestyle
prop to the actual DOM.