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> {paginatedCustomers.map((client) => { const isCustomerSelected = selectedCustomers.includes(client.id); return ( <TableRow hover key={client.id} selected className={classes.rowsForLoop} > <TableCell padding="checkbox"> <Checkbox checked={isCustomerSelected} onChange={(event) => handleSelectOneCustomer(event, client.id)} value={isCustomerSelected} /> </TableCell> <TableCell component={RouterLink} to={`/client/${client.id}`} 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(client.name)} </Avatar> <div> <Link color="textPrimary" component={RouterLink} to="/client/1" variant="h6" > {client.name} </Link> <Typography variant="body2" color="textSecondary" > {client.email} </Typography> </div> </Box> </TableCell> <TableCell> <Box display="flex" alignItems="center" > <div> <Typography variant='subtitle1' className={classes.blukNumber}> {client.company} </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/${client.id}/edit`} > <SvgIcon fontSize="small"> <EditIcon /> </SvgIcon> </IconButton> <IconButton component={RouterLink} to={`/client/${client.id}`} > <SvgIcon fontSize="small"> <ArrowRightIcon /> </SvgIcon> </IconButton> </TableCell> </TableRow> ); })} </TableBody> </Table>

Can anyone help?

web-brackets.com

Comments

Mohamed Atef Date : 2021-06-27

Best answers

51

Best answers

51

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/${client.id}`} 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 
Thanks 

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

TypeError: Cannot read properties of null (reading 'scrollTop') in jest
Publish date: 2022-09-08 | Comments: 1

Tag: React js

React usestate array map() is not working
Publish date: 2022-04-22 | Comments: 3

Tag: React js

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

Tag: React js

How to get the selected object in "Autocomplete material ui"?
Publish date: 2021-12-22 | Comments: 3

Tag: React js