Link cannot appear as a descendant of a link

Question

A React.js app gives the warning

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

What does that mean? How can you prevent it? Are nested links illegal in HTML, HTML5 or React.js?

Answer 1

That means:

<a href="1">     <a href="2"></a> </a> 

Is invalid HTML. Browsers will recognize this and turn this into:

<a href="1"></a> <a href="2"></a> 

React warns you about this because the browser's fix will make the actual DOM different from the virtual DOM, leading to strange bugs when React goes to update stuff.

Heed React's warning and don't nest <a> tags.

Answer 2

I was also getting this warning for my Navigation, I was using react-bootstrap to render React Router Link in NavItem.

Warning: validateDOMNesting `<a>` cannot appear as a descendant of `<a>`.  in a (created by Link)  

Fix: Add componentClass attribute to render NavItem as <span> tag instead of <a> tag (You can use any other tag name here)

My code was

<Nav pullRight>   <NavItem>     <Link to="/responses">Responses</Link>   </NavItem> </nav> 

After fix

<Nav pullRight>   <NavItem componentClass='span'>     <Link to="/responses">Responses</Link>   </NavItem> </nav> 

This also messes up styling, to fix it add the following CSS

.navbar-nav span[role=button] {   padding: 15px;   display: inline-block;   line-height: 20px; }