I’m trying to create a component that allows for the user to click outside it. To do this I need to create a ref for each component that requires the functionality. This is what I’m trying to type for.
I’m struggling to find a fix for the error HTMLDivElement | null is not assignable to type Legacy<HTMLDivElement> | undefined
. I’ve looked through the SO thread here and I’m still not having any success.
useRef TypeScript – not assignable to type LegacyRef<HTMLDivElement>
Here is my code currently. Please see line 127 => https://tsplay.dev/mxypbW
2
Answers
Try this code:
Output
Compiler Options
Playground Link: Provided
This is how you solve you problem because you are adding unnecessary code and you can delete noteRefs and access to the parent HTML element from the child using ref?.current?.parentElement :
you can check the sandbox :
https://codesandbox.io/s/react-typescript-forked-4xgw9z?file=/src/App.tsx:0-2556