Typescript RefForwardingComponent not working

Question

I am trying to make my component accept a ref.

I have a component like so:

const MyComponent: RefForwardingCom         


        

Answer 1

Custom function components can't have 'ref' as a prop. You will have to give it a different name. 'yourRef', for example will be inside the props object.

So to use the ref prop:

const MyComponent: RefForwardingComponent = (props) => {
return 
Hoopla
}

or you can descructure the props:

const MyComponent: RefForwardingComponent = ({yourRef}) => {
return 
Hoopla
}