react-dom.development.js:86 Warning: validateDOMNesting(...):

react-dom.development.js:86 Warning: validateDOMNesting(...):

Through the use of the programming language, we will work together to solve the "react-dom.development.js:86 Warning: validateDOMNesting(...):" puzzle in this lesson.

You are getting error react-dom.development.js:86 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. Because you have a invalid DOM structure in your react app. You are using an anchor tag (<a>) inside another anchor tag.

You can see the DOM structure on click of the element tab after clicking on inspect element in your browser. You can inspect HTML elements in your google chrome browser by clicking on the right button of the mouse or by using CTRL + SHIFT + I button.

Your HTML DOM structure should not look like below.

<a><a></a></a>

<a class="nav-link active" aria-current="page" href="/">Home
 <a class="nav-link active" aria-current="page" href="/">Home</a>
</a>

You can not use an anchor tag inside another anchor tag.

Sample code with Error

<Link className="nav-link"  to="/menu">Menu
    <Link className="nav-link" to="/submenu">Sub Menu</Link>
</Link>

Sample code without Error

<Link className="nav-link"  to="/menu">Menu </Link>
<Link className="nav-link" to="/submenu">Sub Menu</Link>