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

46

Best answers

46

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

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

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js

npm install @mui/material returns error
Publish date: 2022-04-02 | Comments: 1

Tag: React js

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

Tag: React js

[solved] Reactjs is not updating the props
Publish date: 2022-02-04 | Comments: 2

Tag: React js

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js