-1

I am trying to put a Link component form React Router Dom on my Material UI TableRow element

<TableRow component={Link as any} to={`/company/${company.id}`} className="clt-row" key={company.id}>

But I keep getting the folliwng error 

Property 'to' does not exist on type 'IntrinsicAttributes & TableRowProps & { children?: ReactNode; }'.  TS2769

How can I resolve this error?

Amen Ra
  • 2,649
  • 5
  • 38
  • 71
  • So the Link is just being used without any `to` prop or anything? – minus.273 Jan 06 '20 at 07:25
  • @minus.273 No I am using the `to` prop but the `TableRow` element is throwing an error. – Amen Ra Jan 06 '20 at 07:26
  • Yes, but you are using it as a prop for the `TableRow` component, where it actually should go as a prop to the `Link` component. Because in the TableRow API i don't see any `to` prop – minus.273 Jan 06 '20 at 07:29
  • @minus.273 I see other answers that are saying to implement it that way. https://stackoverflow.com/questions/50691049/how-to-add-link-react-router-per-each-material-ui-tablerow – Amen Ra Jan 06 '20 at 07:32
  • @AmenRa You mean the post with 0 accepted answers? What version of Material-UI are you using? [v4](https://material-ui.com/api/table-row/#props) looks like it should handle it. All extra props are passed to the root element. Is the alias messing with it? – Drew Reese Jan 06 '20 at 07:36

1 Answers1

2

Rows need cells. The component prop represents the component to be used for the root node of the row. It defaults to just a tr but could be any component that renders a tr as a root node.

<TableRow>
    <TableCell colSpan={3}> // or however many columns are in your table
        <Link to={`/company/${company.id}`} className="clt-row" key={company.id} />
    </TableCell>
</TableRow>
tobiasfried
  • 1,318
  • 6
  • 16