forwarding ref to react.FC gives type error: Property ref does not exist on type 'IntrinsicAttributes & Props & { children :? ReactNode}

Question

I am learning how to use forward refs here I have a FC where I need to initalize all my refs and then pass them down to it's children so I can get the canvas instances of some chartjs charts. However using forwardRef I get a type error saying ref is not a property of the child.

const BUIDashboard: React.FC = () => {
    const chartRef = React.createRef<RefObject<HorizontalBar>>()
.
.
.
    return (

      <Child 
          ref={chartRef} <------------------- TYPE ERROR HERE
          isLoading={isLoadingChild}
          data={childData} />
     )
}

There are no errors in the child but it's set up like this

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
}

const Child: React.FC<Props> = React.forwardRef(({ rootProps, isLoading, data }, ref: RefObject<HorizontalBar>) => {

    return (
      <HorizontalBar ref={ref}/>
    )
}

Have I defined the params for the child incorrectly?

I thought the issue might be this line

const Child: React.FC<Props>

so I updated the Props type to

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
} & { ref: RefObject<HorizontalBar> }

However then the Child component declaration throws this error:

TS2322: Type 'ForwardRefExoticComponent<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'FC<Props>'.
  Types of property 'defaultProps' are incompatible.
    Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>> | undefined' is not assignable to type 'Partial<Props> | undefined'.
      Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'Partial<Props>'.
        Types of property 'ref' are incompatible.
          Type '((instance: HorizontalBar | null) => void) | RefObject<HorizontalBar> | null | undefined' is not assignable to type 'RefObject<HorizontalBar> | undefined'.
            Type 'null' is not assignable to type 'RefObject<HorizontalBar> | undefined'.

Also this is blatant advertising but I am trying to figure this out to resolve another issue linked below. If you have any insight on this problem please let me know as well. Thank You. Using react-pdf with react-chartjs-2 to generate a pdf

Trondheim

Answer 1

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
}

const Child = React.forwardRef<RefObject<HorizontalBar>,Props>(({ rootProps, isLoading, data, children }, ref) => {
    return (
      <HorizontalBar ref={ref}/>
    );
})

Heartbreaker

Shouldn't it be forwardRef<HorizontalBar, Props>? – Pyrites