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

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.