CODEWITHSUNDEEP
reactjstypescriptreact-routermaterial-uireact-router-dom
Akusas
Akusas

Reputation: 529

Material UI <TableRow component={Link}> TypeScript error TS2769

I'm creating a React SPA using Typescript and Material UI. I'm trying to add a table were each row is a link. This Link component is from React Router. My Table look similar to this (removed a lot of code to give a simplified version).

<Table>
  {data.map((item, index) => {
    return (
      <TableRow component={Link} to="/example">
        <TableCell></TableCell>
      </TableRow>
</Table>

This works in a development environment, but the project can't be built due to the error:

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: TableRowProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
    Type 'typeof Link' is not assignable to type '"abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "big" | "blockquote" | "caption" | "cite" | "code" | "dd" | "del" | "details" | "dfn" | "div" | "dt" | "em" | "figcaption" | ... 45 more ... | undefined'.
      Type 'typeof Link' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLTableRowElement>, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Property 'to' is missing in type 'HTMLAttributes<HTMLTableRowElement>' but required in type 'Readonly<LinkProps<any>>'.
  Overload 2 of 2, '(props: PropsWithChildren<TableRowProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
    Type 'typeof Link' is not assignable to type '"abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "big" | "blockquote" | "caption" | "cite" | "code" | "dd" | "del" | "details" | "dfn" | "div" | "dt" | "em" | "figcaption" | ... 45 more ... | undefined'.
      Type 'typeof Link' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLTableRowElement>, any>'.

I'm stumped as to how I solve this problem. Through a few searches, then it seems this problem is only in TypeScript.

Upvotes: 0

Views: 1460

Answers (1)

AKX
AKX

Reputation: 169062

The error basically says that the props of Links and table rows are incompatible.

If you want your table rows to have linky clickability, you could add an onClick handler using the react-router history object, e.g. using the useHistory hook.

Or if you want to live on the edge, you could probably just tell TypeScript to leave you alone with a cast like

<TableRow component={Link as any} to="/example">

but then you're naturally on your own as far as type safety is concerned.

Upvotes: 3

Related Questions