Getting Property 'height' does not exist on type 'string' TypeScript Error

Question

I'm using useRef to reference a div element and storing getBoundingClientRect(). Upon using it, I get a TypeScript error of Property 'height' does not exist on type 'string'. How do I address this error?

const divRef = useRef(null);
const [divSize, setDivSize] = useState("0");

setDivSize(divRef.current.getBoundingClientRect());

console.log(divSize.height); // getting TS error: Property 'height' does not exist on type 'string'.

return (
  <Content ref={divRef}>
     {content}
  </Content>
)

Alexander Staroselsky · Accepted Answer · 2021-12-16 19:54:58Z

0

You can use a generic type with useRef to something that has getBoundingClientRect as a valid method, such as HTMLElement or HTMLDivElement:

const divRef = useRef<HTMLDivElement>(null);

That should properly allow to access height of result of getBoundingClientRect().

This is purely a solution for typing. The answer by jsejcksn help explain how to handle falsy/undefined ref in an effective way.

edited Dec 16, 2021 at 19:54

answered Dec 16, 2021 at 19:30

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Nguyen Over a year ago

Similar with the other answer, I'm now getting this error Argument of type 'DOMRect' is not assignable to parameter of type 'SetStateAction<number>'.

Alexander Staroselsky Over a year ago

@EricNguyen what value do you actually want to save? The height as a number? The height as a string? The entire DOM rec object? It’s not clear what you want to save in state and as what type.

jsejcksn · Accepted Answer · 2021-12-17 12:23:32Z

0

Unconditionally calling a setState function at the top level of any component is always an error, because it initiates the reconciliation algorithm (infinitely). Here is a note from the React documentation (which needs to be updated for functional components):

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop.

↳ https://reactjs.org/docs/react-component.html#componentdidupdate

To fix this, wrap the setState call in the effect hook:

const divRef = useRef<HTMLDivElement>(null);
const [divSize, setDivSize] = useState(new DOMRect());

useEffect(() => {
  if (!divRef.current) return;
  const rect = divRef.current.getBoundingClientRect();
  setDivSize(rect);
  console.log(rect.height);
});

return (
  <Content ref={divRef}>
     {content}
  </Content>
)

Also, you can't use the ref prop on a functional component.

edited Dec 17, 2021 at 12:23

answered Dec 16, 2021 at 19:43

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

5 Comments

Eric Nguyen Over a year ago

I tried this but now getting this error: Argument of type 'DOMRect' is not assignable to parameter of type 'SetStateAction<number>'

Alexander Staroselsky Over a year ago

@EricNguyen sure it would be setDivSize(divRef.current.getBoundingClientRect().height);. I didn't focus on that aspect as the error was surrounding the typing of the ref.

Eric Nguyen Over a year ago

Ah, I was trying to avoid setting a specific value to a variable, but wanted to save the entire DOMRect to a variable.

jsejcksn Over a year ago

@EricNguyen I’m not at a computer to test it right now, but you might try using the following as the initial argument to useState instead of 0: new DOMRect(0, 0, 0, 0)

jsejcksn Over a year ago

@EricNguyen I updated my answer with the new initial state value.

Collectives™ on Stack Overflow

Getting Property 'height' does not exist on type 'string' TypeScript Error

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related