React.Fragment causes errors in the console
oddsund opened this issue · 3 comments
I'm submitting a ...
[X ] bug report
[ ] feature request
[ ] support request
If you're reporting a bug, please provide a minimal demonstration of the problem
https://codesandbox.io/s/ll886vz80l
What is the current behavior?
An error stating "TypeError: _this.content is undefined" is printed on each scroll event when returning React.Fragment from the render callback function.
What is the expected or desired behavior?
No error.
Why do you want this? What use case do you have?
A Sticky element containing several elements.
What is your environment?
- Version: 6.0.3
- Browser: Firefox 63
- React: 16.6
Is there anything else I should know?
The error seems to come from src/Sticky.js#L125. findDOMNode seems to return undefined when called with the context of a react fragment, even though it should return the ref to the first child.
While it might not make sense to use Fragments as a child of a Sticky node, some documentation mentioning it would be greatly appreciated. :)
Also, as a heads up, findDOMNode is on its way to deprecation(according to facebook/react#13841, solution here: https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
Thanks for the issue! Yeah, findDOMNode definitely isn't ideal. I'm not positive we can solve this, as we need to measure the DOM node and Fragments don't create one. If you want to open a PR to the docs for now, I'd be happy to merge it.
React fragment is also responsible for getBoundingClientRect error in console:
Sticky.js:61 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined at Sticky._this.handleContainerEvent
Changing Fragment to HTML tag fixes this issue.
Yes, this is known behavior.
we need to measure the DOM node and Fragments don't create one.
Open to contributions to improve docs or behavior around this!