Hooks 11 exercises
Problem

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

Loading exercise

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.