What should I put instead of `null` for useRef?

Issue

I have a sidebar function to close on a click outside, however I am getting a TypeError: Property 'contains' does not exist on type 'never'.

const sidebar = useRef(null);
  const trigger = useRef(null);

  // Close on click outside
  useEffect(() => {
    const clickHandler = ({ target }: { target: ReactNode }) => {
      if (!sidebar.current || !trigger.current) return;
      if (
        !sidebarOpen ||
        sidebar.current.contains(target) || // Error: Property 'contains' does not exist on type 'never'.
        trigger.current.contains(target)
      )
        return;
      setSidebarOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });

Solution

You can use a generic argument with useRef e.g.

const sidebar = useRef<HTMLElement | null>(null);

And now you will be able to use optional chaining e.g. sidebar.current?.contains

Answered By - basarat