Example of a forward ref generic component in React 18

forwardref-generics-18.ts

import React, { ForwardedRef, forwardRef, MouseEvent } from 'react';

type ClickableListProps<T> = {
  items: T[];
  onSelect: (
    item: T,
    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
  ) => void;
};

function ClickableListInner<T>(
  props: ClickableListProps<T>,
  ref: ForwardedRef<HTMLUListElement>,
) {
  return (
    <ul ref={ref}>
      {props.items.map((item, i) => (
        <li key={i}>
          <>
            <button onClick={(e) => props.onSelect(item, e)}>Select</button>
            {item}
          </>
        </li>
      ))}
    </ul>
  );
}

const ClickableList = forwardRef(ClickableListInner) as <T>(
  props: ClickableListProps<T> & { ref?: ForwardedRef<HTMLUListElement> },
) => ReturnType<typeof ClickableListInner>;

export default ClickableList;

Thank @IrvingArmenta for contributing to this!

p/s: In case you're a fan of the arrow function (like me), you can use this approach

const ClickableListInner = <T>(
  props: ClickableListProps<T>,
  ref: ForwardedRef<HTMLUListElement>,
) {
  return (
    <ul ref={ref}>
      {props.items.map((item, i) => (
        <li key={i}>
          <>
            <button onClick={(e) => props.onSelect(item, e)}>Select</button>
            {item}
          </>
        </li>
      ))}
    </ul>
  );
}

Thanks for contributing with your code @tungvn , but where's the forwardref in your exemple?

I think they just showed another approach for the ClickableListInner.
The forwardRef is exactly the same as the first snippet