CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
ChrisP
ChrisP

Reputation: 10116

Why does React.forwardRef cause a missing display name in Material-UI Typescript ListItemLink example?

In this Material-UI documentation Typescript example for creating a ListItemLink

https://material-ui.com/guides/composition/#react-router

function ListItemLink(props: ListItemLinkProps) {
    const { icon, primary, to } = props;

    const renderLink = React.useMemo(
      () =>
        React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => (
          <RouterLink to={to} ref={ref} {...itemProps} />
        )),
      [to],
    );

    return (
      <li>
        <ListItem button component={renderLink}>
          {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
          <ListItemText primary={primary} />
        </ListItem>
      </li>
    );
  }

there is an ESLint error on React.forwardRef

(ESLint) react/display-name: Component definition is missing a display name

    React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => (
      <RouterLink to={to} ref={ref} {...itemProps} />
    )),

which prevents Typescript compilation. Any thoughts on how to change the code to correct this problem?

Upvotes: 1

Views: 2235

Answers (1)

ChrisP
ChrisP

Reputation: 10116

Material-UI team has provided a fix as follows and will be updating the documentation.

React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(function Link(itemProps, ref) { 
  return <RouterLink to={to} ref={ref} {...itemProps} />;
}),

See https://github.com/mui-org/material-ui/issues/25975

Upvotes: 1

Related Questions