Typescript RefForwardingComponent not working

reactjs typescript tsx
Mathias Nielsen picture Mathias Nielsen · Nov 22, 2019 · Viewed 9.6k times · Source

I am trying to make my component accept a ref.

I have a component like so:

const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = (props, ref) => {
    return <div ref={ref}>Hoopla</div>
}

But when I try to pass a ref to is like so:

<MyComponent ref={myRef}></MyComponent>

... I get this error:

Property 'ref' does not exist on type 'IntrinsicAttributes & IMyComponentProps & { children?: ReactNode; }'.ts(2322)

What am I doing wrong?

Answer

ford04 picture ford04 · Mar 4, 2020

RefForwardingComponent is a render function, which receives props and ref parameters and returns a React node - it is no component:

The second ref argument only exists when you define a component with React.forwardRef call. Regular function or class components don’t receive the ref argument, and ref is not available in props either. (docs)

That is also the reason, why RefForwardingComponent is deprecated in favor of ForwardRefRenderFunction, which is functionally equivalent, but has a different name to make the distinction clearer.

You use React.forwardRef to turn the render function into an actual component that accepts refs:

import React, { ForwardRefRenderFunction } from 'react'

type IMyComponentProps = { a: string }
const MyComponentRenderFn: ForwardRefRenderFunction<HTMLDivElement, IMyComponentProps> =
    (props, ref) => <div ref={ref}>Hoopla</div>

const MyComponent = React.forwardRef(MyComponentRenderFn);
const myRef = React.createRef<HTMLDivElement>();

<MyComponent a="foo" ref={myRef} />

Related questions

Default property value in React component using TypeScript

I can't figure out how to set default property values for my components using Typescript. This is the source code: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): …

Read More
interface states and props in typescript react

I'm working on a project that uses typescript as well as react and am new to both. My questions is about interface in typescript and how that relates to props and states. What is actually happening? My application doesnt run …

Read More
Extending HTML elements in React and TypeScript while preserving props

I just can't wrap my head around this I guess, I've tried probably half a dozen times and always resort to any... Is there a legitimate way to start with an HTML element, wrap that in a component, and wrap …

Read More