Introduction

The validateDOMNesting error in React occurs when the DOM elements are not properly nested according to the HTML specification.

Example of how the error looks

The error message will look like this:

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

This error tells us that the <p> element cannot be a descendant of another <p> element.

HTML specification

HTML has a defined set of rules for how elements can be nested.

Let's look at some examples of correct and incorrect nesting.

Elements must be properly nested and not overlap:

<p>This is <em>very <strong>wrong</em>!</strong></p> <!-- incorrect nesting -->
<p>This is <em>very <strong>correct</strong></em>.</p> <!-- correct nesting -->

Other examples would be nesting <a> elements inside <button> elements, or <button> elements inside <a> elements. Or them being nested inside each other, such as <a> inside <a>.

These examples are quite clear as to why they are incorrect, but why is nesting <p> elements inside <p> elements not allowed?

Why is nesting <p> inside <p> not allowed?

The <p> element cannot contain nested <p> elements or other block-level elements like <div>, <h1>, etc. This is because a paragraph (<p>) is meant to be a standalone block, representing a complete point.

The main issue is semantic meaning. The <p> element is meant to represent a single paragraph, a distinct part of a document discussing a specific idea. Nesting paragraphs within each other would complicate the structure, making it harder for both people and machines (like search engines or accessibility tools) to understand.