I've got the "Object is possibly null" error many times and usually I use a safety "if statement" in case it returns null.
I've got the following function:
const ModalOverlay = (props: any[]) => {
const overlayEl = useRef(null);
useEffect(() => {
overlayEl.current.focus();
});
return <div {...props} ref={overlayEl} />;
}
But overlayEl.current
gets the error "Object is not defined". So I've tried:
if (!overlayEl) {
return null
} else {
useEffect(() => {
overlayEl.current.focus();
});
return <div {...props} ref={overlayEl} />;
}
Which didn't work. I've tried also:
overlay && overlayEl.current.focus();
Any hints would be highly appreciated! Thanks
Best Answer
When you declare const overlayEl = useRef(null); Makes the type it comes out as is null because that's the best possible inference it can offer with that much information, give typescript more information and it will work as intended.
Try....
Alternatively some syntax sugar for if you don't care for when its undefined is to do something like this.
using the above syntax all common DOM methods just return defaults such as "0" i.e overlayEl.offsetWidth, getBoundingClientRect etc.
Usage:
The way this works is typescripts static analysis is smart enough to figure out that
if
check "guards" against null, and therefore it will remove that as a possible type from the union ofnull | HTMLDivElement
within those brackets.