How to add react-router per each Material-UI TableRow?

Question

How to add link per TableRow in .map?

*my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom

how to add link in every loop of .map in Table TableRow?

   import React, { Fragment } from 'react'
import { Paper } from 'material-ui'
import Table from 'material-ui/Table';
import TableBody from 'material-ui/Table/TableBody';
import TableCell from 'material-ui/Table/TableCell';
import TableHead from 'material-ui/Table/TableHead';
import TableRow from 'material-ui/Table/TableRow';
import { connect } from 'react-redux'
// import { Edit, Delete } from '@material-ui/icons'
import { withStyles } from 'material-ui/styles'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const drawerWidth = 100;
class Listofbond extends React.Component {
    render() {
        console.log(this.props);
        const { MainProps, classes } = this.props;
        return (
            <Router>
                <Paper>
                    <Table >
                        <TableHead>
                            <TableRow>
                                <TableCell>Bondame</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {[1, 2, 3].map(n => {
                                return (
                                    <Link to={`/bond/${n}/`} key={n}>
                                        <TableRow>
                                            <TableCell component="th" scope="row">
                                                {n}
                                            </TableCell>
                                        </TableRow>
                                    </Link>
                                );
                            })}
                        </TableBody>
                    </Table>
                </Paper>
            </Router>
        )
    }

}

export default Listofbond;

still got an error *my error is validateDOMNesting(...): cannot appear as a child of "< a >" — Yamoshi Wolverine, Jun 06 '18 at 01:50

score 18 · Answer 1 · answered Jul 23 '19 at 02:01

18

The correct way to do this is to use the component prop of the TableRow component:

<TableRow component={Link} to={`/bond/${n}/`} key={n}>
...
</TableRow>

answered Jul 23 '19 at 02:01

CYMA

621
7
15

1

You could also wrap the parent component in ``withRouter`` and then put on ``onClick`` handler on TableRow which calls ``history.push('/path/to/wahtever')`` – Cody Swann Jul 23 '19 at 02:21
2

That would not give the functionalities of an "a" element, like right clicking -> open new window, see path on browser's bottom and etc. – Renan Souza Jan 16 '20 at 15:47
25

I've tried this solution but it gave me a validation error telling that cannot be used as a child of . I believe this is still incorrect HTML. The solution that I've used (although I'm not absolutely happy with it) is to just wrap the content of a column with react-router's Link. – Salivan Feb 19 '20 at 16:36
this results in errors; it's not "the correct" way, though it is idiomatic for material-ui. the fact that this idiom results in errors means that it might simply not have a correct solution (because of the limitations of HTML more so than material-ui) – Sasha Kondrashov Jul 29 '20 at 08:23
3

This solution gives error... and Wrapping the Component with a Link tag breaks the MUI design – mercury Apr 03 '21 at 10:23

score 7 · Answer 2 · answered Mar 06 '22 at 13:29

Use component='div' for almost all components (Table, TableHead, TableBody, TableCells and even the (only) TableRow in TableHead) and component={Link} for the other TableRows (in TableBody):

<TableContainer>
  <Table component='div'>
    <TableHead component='div'>
      <TableRow component='div'> { /* Use `div` here, too */ }
        <TableCell component='div'>
           ...
        </TabelCell>
        <TableCell component='div'>
           ...
        </TabelCell>
        ...
      </TableRow>
    </TableHead>

    <TableBody component='div'>
      <TableRow component={Link}> { /* Use `Link` here */ }
        <TableCell component='div'>
           ...
        </TabelCell>
        <TableCell component='div'>
           ...
        </TabelCell>
        ...
      </TableRow>
      <TableRow component={Link}> { /* Use `Link` here */ }
        ...
      </TableRow>
      ...
    </TableBody>
  </Table>
</TableContainer>

By the way, you miss HTML native <table>. But everything looks as native.

I think, unfortunately, there is no other way. See: https://stackoverflow.com/a/17147876/5318303

This helped fix the warnings/errors from the top answer. Thanks! — dem, Mar 31 '22 at 22:10
This is indeed the only way to add link to a lookalike table. What is the possible drawbacks of not using the native table element? — Soullivaneuh, Sep 06 '22 at 08:56
@Soullivaneuh; AFAIK it's not possible (w/o browser warnings or errors) — Mahdi Cheraghi, May 04 '23 at 12:07

score 5 · Answer 3 · answered Mar 24 '22 at 10:38

For those using react-router-dom v6+, this works:

import { useNavigate } from "react-router-dom";

...
export const MyComponent({ }) {
    let navigate = useNavigate();
    // Using table as per the OP's code:
    return (
        <TableContainer>
            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>Bondame</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {[1, 2, 3].map(n => {
                        return (
                            <TableRow onClick={() => { navigate(`/bond/${n}/`); }}>
                                <TableCell component="th" scope="row">
                                    {n}
                                </TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    );
};

Indeed, but this does not create a real link. For example, you can not open in a new tab using ctrl+click. — Soullivaneuh, Sep 06 '22 at 08:39

mercury · Answer 4 · 2021-04-03T10:38:16.563

There are many workarounds to this because the solution above gives an error validateDOMNesting(...) on the console.

add Link tag around the text itself ( the column value ) inside the <ColumnCell> , although it changes the text into more like <a> tag .. but you could handle this. by doing this style={{ textDecoration: 'none', color: 'black' }}

             <TableCell key={column.id} align={column.align}>
                  <Link
                    to={`/elsewhere/${row.id}`}
                    style={{ textDecoration: 'none', color: 'black' }}
                  >
                    {value}
                  </Link>
             </TableCell>

create a button with each table row.

score 0 · Answer 5 · answered Jun 05 '18 at 17:19

0

Link is applied to the component for which onClick is defined, so wrap your TableRow into a div like this:

<Link to={`/bond/${n}/`} key={n}>
   <div>
     <TableRow>
       <TableCell component="th" scope="row">
         {n}
       </TableCell>
      </TableRow>
   </div>
</Link>

answered Jun 05 '18 at 17:19

Jyoti Arora

131
8

4

still go an error of *my error is validateDOMNesting(...): cannot appear as a child of "< a >" – Yamoshi Wolverine Jun 06 '18 at 01:50
I'm using the same and it's working, but in my case there is no need to use Router tag. Let me know if you require more help. – Jyoti Arora Jun 06 '18 at 03:30

How to add react-router per each Material-UI TableRow?

5 Answers5

Linked