user image

Joseph Morgan
Published in : 2021-06-27

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. Reactjs

React js

index.js:1 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. I am facing this warning in my component can anyone tell me why I am getting this warning?

the component return is

 <Table> <TableHead> <TableRow> <TableCell padding="checkbox"> <Checkbox checked={selectedAllCustomers} indeterminate={selectedSomeCustomers} onChange={handleSelectAllCustomers} /> </TableCell> <TableCell> Name </TableCell> <TableCell> Company Name </TableCell> <TableCell> Loan Amount </TableCell> <TableCell> Loan Status </TableCell> <TableCell> <img className={classes.bottomArrow} src=/static/icons/icoutline-arrow_downward-24px.svg alt="Bottom arrow"/> Last Activity </TableCell> <TableCell align=center> Action </TableCell> </TableRow> </TableHead> <TableBody> { => { const isCustomerSelected = selectedCustomers.includes(; return ( <TableRow hover key={} selected className={classes.rowsForLoop} > <TableCell padding="checkbox"> <Checkbox checked={isCustomerSelected} onChange={(event) => handleSelectOneCustomer(event,} value={isCustomerSelected} /> </TableCell> <TableCell component={RouterLink} to={`/client/${}`} className={classes.rowsForLoop}> <Box display="flex" alignItems="center" > <Avatar className={classes.avatar} src={client.avatar === 'bob' ? '/static/icons/vance-logo.png': '/static/icons/Na.png'} > {getInitials(} </Avatar> <div> <Link color="textPrimary" component={RouterLink} to="/client/1" variant="h6" > {} </Link> <Typography variant="body2" color="textSecondary" > {} </Typography> </div> </Box> </TableCell> <TableCell> <Box display="flex" alignItems="center" > <div> <Typography variant='subtitle1' className={classes.blukNumber}> {} </Typography> </div> </Box> </TableCell> <TableCell> {client.amount} </TableCell> <TableCell> {getLabels(client.status)} </TableCell> <TableCell> {client.lastActivity} </TableCell> <TableCell align=right> <IconButton component={RouterLink} to={`/client/${}/edit`} > <SvgIcon fontSize="small"> <EditIcon /> </SvgIcon> </IconButton> <IconButton component={RouterLink} to={`/client/${}`} > <SvgIcon fontSize="small"> <ArrowRightIcon /> </SvgIcon> </IconButton> </TableCell> </TableRow> ); })} </TableBody> </Table>

Can anyone help?


Mohamed Atef Date : 2021-06-27

Best answers


Best answers


Hi Joseph, 
This is happening because in reactjs you cannot have two <a> inside each other, from what i see that you have 

<TableCell component={RouterLink} to={`/client/${}`} className={classes.rowsForLoop}>

and inside it there is Link 

<Link color="textPrimary" component={RouterLink} to="/client/1" variant="h6">

So the browser compile it to be 

<a href="/somewhere"> <a href="#"></a> </a>

and this is an issue in Reactjs so you need to remove the link component from the ‘TableCell’ or you need to remove the Link tag from inside it 

Joseph Morgan Date : 2021-06-27

Thanks Mo, got it

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to update React router without Re-render?
Publish date: 2021-11-22 | Comments: 2

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js

useStyles Invalid hook call class component
Publish date: 2022-02-10 | Comments: 2

Tag: React js

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js

React.Fragment. React.Fragment can only have key props and children
Publish date: 2022-08-06 | Comments: 2

Tag: React js

How to use SetFieldValue from outside render function? Formik
Publish date: 2021-07-03 | Comments: 2

Tag: React js