How to add ref to a react styled component div using react and typescript?

Question

i want to add ref to styled component div.

My code is like below,

const DragAndDrop: React.FC<any> = props => {
    const div_ref= React.createRef();
    return (
        <Zone ref={div_ref}/>
    );
}

But this gives me error

Type RefObject is not assignable to type {instance: htmlDivElement || null} => void || refObject|| null || undefined

could someone help me fix this. thanks.

wentjun wentjun · Accepted Answer · 2020-05-29T12:23:58

If you are working with functional components, you should be using the useRef hook instead, and initialise it with a value of null.

const DragAndDrop: React.FC<any> = (props) => {
  const div_ref= useRef(null);

  return (
    <Zone ref={div_ref}/>
  );
}

In addition, try not to use any for the type genetic parameter of your component.