menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

How do I get an element's position?

May 10, 2019 at 7:25am

How do I get an element's position?

May 10, 2019 at 7:25am
I tried to use refs by following (this guide)[https://reactjs.org/docs/refs-and-the-dom.html#creating-refs]. When i try to run myRef.current.getBoundingClientRect() I get this error: TypeError: myRef.current.getBoundingClientRect is not a function. I've used this method before and it worked. What's changed? Was getBoundingClientRect deprecated or something?

May 10, 2019 at 8:21am
I tried it according to the guide with one of my components and it works. Did you try setting a breakpoint and inspecting myRef.current? What version of React are you using? If you cannot solve it you might need to share some of your code
Edited
like-fill
1
  • reply
  • like
as far as I can tell you can't use refs on React components withour forwardRef. What I ended up doing is wrapping my component in a div and adding the ref to the div
  • reply
  • like

May 10, 2019 at 6:17pm
getBoundingClientRect is apart of js, not react, so no worries there. It's not deprecated.
You'll need to create a ref in the constructor if you haven't, just like the guide link you posted shows.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
console.log(this.myRef);
return <div ref={this.myRef} />;
}
}
Then
console.log(this.myRef); inside render() and see what comes up.
If this.myRef.current is the DOM node, then this.myRef.current.getBoundingClientRect() should return something of value.
My guess is you are missing the this part. this.myRef, not myRef.
Edited
  • reply
  • like

May 11, 2019 at 9:13am
That's the problem this.myRef.current does not return a DOM node, but some kind of custom React object with styling information etc. Apparently that can be solved with ref forwarding to the vanilla HTML element that the React component renders, but I didn't attempt that.
  • reply
  • like
What kind of Component did you attach the ref to? It has to be a valid DOM element. It cannot, for instance, be a React.Fragment. So you wrapping it in a div would be correct because that is a valid DOM node. You won't need forwardRef in the example shown above.
Edited
like-fill
1
  • reply
  • like

May 13, 2019 at 1:33am
the component I was using was from a component library, so it's hard for me to say how it was built atm, but it definitely wasn't a valid DOM element, which is why this.myRef.current did not return a DOM node
  • reply
  • like

May 15, 2019 at 11:31pm
There are two potential problems. Hard to know without seeing the code or knowing which component you're using.
  1. The component you're importing may not be forwarding the ref to its underlying React component. If all you need to do is measure or find position, you could solve this by wrapping it in a div and attaching your ref to that.
  2. You may be trying to access myRef.current before it has been attached. This can be solved with
if (this.myRef.current) {
const dimensions = this.myRef.current.getBoundingClientRect();
}
Edited
  • reply
  • like

January 18, 2020 at 2:37am
I'm having a heck of a time trying to get this working too. I've got a ternary conditional setup for this , I've tried offset() and getBoundingClientRect() and both are coming up undefined
  • reply
  • like
React.createRef is setup in constructor and linter is fine with how I'm attaching to the component
  • reply
  • like
also tried regular if statements but nah
  • reply
  • like
Always get this.ref.current.offsetTop is not a function
  • reply
  • like
Sounds like your component isn't mounted yet. Only use getBoundingClientRect or offsetTop if ref.current is truthy
like-fill
2
  • reply
  • like