user

Joseph Morgan

27 Jun 2021

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?

Comments

Mohamed Atef

27 Jun 2021

Best Answer

best answer
githubgithubgithub

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 

Replies

Joseph Morgan

27 Jun 2021

Thanks Mo, got it

© 2023 Copyrights reserved for web-brackets.com