React.ForwardRef TypeScript Component Type Error

Question

I have a Block component which will render a div or a tag based on a prop value. I want to pass a ref from the parent component to this component. Therefore, I need to use RefForwardingComponent type for my component variable type, but I get an error for type incompatibility between HTMLAnchorElement and HTMLDivElement. How can I fix it? here's the component code on CodeSandBox:

import * as React from "react";

interface Props {
  isLink: boolean;
}

type PropsWithElementProps<T> = React.HTMLProps<T> & Props;

type RefComponent<T, U> =
  | React.RefForwardingComponent<T, PropsWithElementProps<T>>
  | React.RefForwardingComponent<U, PropsWithElementProps<U>>;

// error for Block variable type... full error on CodeSandBox link
const Block: RefComponent<HTMLAnchorElement, HTMLDivElement> = React.forwardRef(
  ({ isLink }, ref) => {
    if (isLink)
      return (
        <a ref={ref} href="#nothing">
          I'm a link!
        </a>
      );
    else return <div ref={ref}>I'm a div!</div>;
  }
);

export default Block;

Maybe related stackoverflow.com/questions/58991706/…

Sulthan
– Sulthan

2020-03-03 21:12:31 +00:00
Commented Mar 3, 2020 at 21:12 — Sulthan
– Sulthan, Commented Mar 3, 2020 at 21:12

spex · Accepted Answer · 2020-03-06 17:32:15Z

4

React.forwardedRef expects you to provide a type for the returned element and the props in cases where it cannot be inferred. You can indicate it like this:

import * as React from "react";

interface Props {
  isLink?: boolean;
}

const Block = React.forwardRef<HTMLAnchorElement & HTMLDivElement, Props>(
  ({ isLink = false }, ref) => {
    return isLink ? (
      <a ref={ref} href="#nothing">
        {"I'm a link!"}
      </a>
    ) : (
      <div ref={ref}>{"I'm a div!"}</div>
    );
  }
);

export default Block;

The forwardRef type definition looks like this:

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

edited Mar 6, 2020 at 17:32

answered Mar 3, 2020 at 21:28

spex

1,13410 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiarash Z Over a year ago

Thank you so much! this is working. Can you explain this a little bit more, please? why would I combine the types of HTMLAnchorELEment and HTMLDivElement when my component only returns one of them? why it shouldn't be HTMLAnchorElement | HTMLDivElement?

Collectives™ on Stack Overflow

React.ForwardRef TypeScript Component Type Error

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related