Joseph Morgan
Published in : 2021-06-27
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?
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
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
and inside it there is Link
So the browser compile it to be
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