useRef with HTML Elements
In this exercise, we have an error while trying to use useRef
with a typed HTMLDivElement
.
We are trying to pass the ref
directly into a div
:
export const Component = () => { const ref = useRef<HTMLDivElement>(); // error over `ref` return <div ref={ref} />;};
Ho
Transcript
0:00 Let's use the knowledge that we just gained in the previous explainer and look at this example. We have a useRef here, which is an HTML development, so we're typing it as that, and we're trying to pass that ref directly into this div here.
0:16 It's got a big old error here, and this is a very, very unfriendly error. We've got MutableRefObject, LegacyRef, RefObject, undefined is not assignable to type HTML development or .
0:32 Your job here is to figure out what is going on here, why these errors are occurring, and what we can do to fix it. You will need to make a small runtime change to this, and it's not going to feel very intuitive. Good luck.