Property getBoundingClientRect does not exist on type ParentNode

user_10006363 0
Viewed 51

Was trying to use getBoundingClientRect like:

const menuWrapper = useRef<HTMLElement>(null);
const parentNode = menuWrapper?.current?.parentNode;

const { top, left, height, width } = parentNode?.getBoundingClientRect();

return (
   <div ref={menuWrapper}>
     ...
   </div>
)

But currently can't pass typescript error: Property 'getBoundingClientRect' does not exist on type 'ParentNode'. Anyone that know a way around this?

typescript reactjs javascript
1 Answers

Try to use parentElement instead of parentNode.

const parentEl = menuWrapper?.current?.parentElement;

Also you can take a look at this to understand the difference.

But anyway, since you are using optional chaining, which means everything can be undefined, you can't use top, left, height, and width like this. At least you will need to add something like

if (!parentEl) {
  return;
}

before destructuring.

user_71933800
Related