How to fix <td> cannot appear as a child of <a> warning?

Question

How to fix these warnings? I used material ui table component. I think the warnings comes from component={Link} to={ /patient/${patient.id} }

<TableContainer className={styles.tableContainer} component={Paper}>
      <Table aria-label="patients infomation table">
        <TableHead className={styles.tableHead}>
          <TableRow>
            <TableCell align="right">First Name</TableCell>
            <TableCell align="right">Last name</TableCell>
            <TableCell align="right">DOB</TableCell>
            <TableCell align="right">Phone Number</TableCell>
            <TableCell align="right">Email</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {patients.map((patient) => (
            <TableRow
              component={Link}
              to={`/patient/${patient.id}`}
              onClick={selectPatientClick}
              key={patient.id}
              className={styles.tableRow}
            >
              <>
                <TableCell align="right">{patient.fName}</TableCell>
                <TableCell align="right">{patient.lName}</TableCell>
                <TableCell align="right">{patient.dob}</TableCell>
                <TableCell align="right">{patient.pNumber}</TableCell>
                <TableCell align="right">{patient.email}</TableCell>
              </>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

Answer 1

The reason is that you are using the Link as component to the TableRow. The prop components tells Material-UI the component base on what it will render the selected component. Instead of passing the link as a component, use the hover prop on the TableRow...

 {patients.map((patient) => ( <TableRow hover onClick={selectPatientClick} key={patient.id} className={styles.tableRow} > <> <TableCell align="right">{patient.fName}</TableCell> <TableCell align="right">{patient.lName}</TableCell> <TableCell align="right">{patient.dob}</TableCell> <TableCell align="right">{patient.pNumber}</TableCell> <TableCell align="right">{patient.email}</TableCell> </> </TableRow> ))}

and in the function you are passing to the onClick handler of that component, navigate programaticaly to the route you need using history.push('/desired-route') . Just import the useHistory hook from react-router-dom

 import {useHistory} from 'react-router-dom'... const history = useHistory() const selectPatientClick = () => { //do whatever you need and finally... history.push(`/patient/${patient.id}`) }

Answer 2

You can't use Link as component of TableRow, instead use useHistory and useRouteMatch to link to page you want,

import {useHistory, useRouteMatch} from 'react-router-dom'
...
const {url} = useRouteMatch()
const history = useHistory()
...
<TableRow
  onClick={() => history.push(`${url}/${patient.id}`)}
  key={patient.id}
  className={styles.tableRow}
>
...