Categories
React Answers

How to Fix the “Warning: validateDOMNesting(…): ‘a’ cannot appear as a descendant of ‘a’. ” Error When Developing React Apps?

Spread the love

To fix the "Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>. " error when developing React apps, we should make sure we don’t nest a elements within a elements.

For instance, we instead of writing:

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

which is invalid HTML, we write:

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

Browsers will fix the HTML when the code is rendered, which will make React’s virtual DOM different from what’s rendered.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.