TypeScript error - property component does not exist on React mui MenuItem

Question

I am using react mui MenuItem and I need to make a menu item as a link. I have tried to that like this:

        <MenuItem
          component={<Link href={`/backend/api/exam/${row.id}/result`} />}
          className={classes.menuItem}
          onClick={() => handleClose()}>
          Result
        </MenuItem>

But, when I do that, it throws an error where it says that property component does not exist on MenuItem:

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...>...'. TS2322

What am I doing wrong here, why do I get this error?

Answer 1

The documentation:

Type: elementType

Description: Either a string to use a DOM element or a component.

Using a component as a React.Node wouldn't work.

The component prop expects the following: React.Element<typeof Component>.

In your case, providing the component as a typeof will do the trick:

import { Link } from 'react-router-dom';
....

<MenuItem
  component={Link}
  to={`/backend/api/exam/${row.id}/result`}
  className={classes.menuItem}
  onClick={() => handleClose()}>
  Result
</MenuItem>

Another work around would be to wrap your <MenuItem> inside a <Link>:

<Link to={`/backend/api/exam/${row.id}/result`}>
  <MenuItem
    className={classes.menuItem}
    onClick={() => handleClose()}>
  >
    Result
  </MenuItem>
</Link>