React DOM elements should be nested properly

• REACT_INVALID_DOM_NESTING
• Code Quality
• Low
• react

This rule applies when React DOM elements are not nested properly according to the HTML specification.

React requires using valid DOM elements and generates warnings for invalid DOM trees even though browsers may apply recoveries. The warnings are necessary because invalid trees may confuse React and break re-renderings in the future versions of React.

For example, React outputs warnings in the following cases:

1. A <tr> is used inside <table> without the <tbody>. In this case, browsers insert the <tbody> in the generated DOM tree. Although the HTML specification says <tbody> is not required in some cases, it is recommended to always match the generated DOM tree.
2. An extraneous space is used in JSX code where a text node is not allowed. In JSX, most extraneous spaces are automatically removed. However, if you put a space in the same line as the previous tag like <tr> <td>, it is not removed and causes a React warning.
3. A non-phrasing content is used inside <p>. The <p> element allows only phrasing content like <span> or <code>. If you use a non-phrasing element like <pre> or <div>, a React warning occurs.

Noncompliant Code Example

import React from 'react';

export function Example1() {
    return (
        <table>
            <tr><td>Example 1</td></tr>{/* REACT_INVALID_DOM_NESTING alarm because '<tbody>' is missing. */}
        </table>
    );
}

export function Example2() {
    return (
        <table>
            <tbody>
                <tr> <td>Example 2</td></tr>{/* REACT_INVALID_DOM_NESTING alarm because there is an extraneous space after '<tr>'. */}
            </tbody>
        </table>
    );
}

export function Example3() {
    return (
        <p>
            <pre>example3()</pre>{/* REACT_INVALID_DOM_NESTING alarm because '<pre>' is not a phrasing content. */}
        </p>
    );
}

Compliant Code Example

import React from 'react';

export function Example1() {
    return (
        <table>
            <tbody>
                <tr><td>Example 1</td></tr>
            </tbody>
        </table>
    );
}

export function Example2() {
    return (
        <table>
            <tbody>
                <tr><td>Example 2</td></tr>
            </tbody>
        </table>
    );
}

export function Example3() {
    return (
        <p>
            <code>example3()</code>
        </p>
    );
}

Version

This rule was introduced in DeepScan 1.38.0.

See

• <tr> element

• Content categories

• React Warning: validateDOMNesting(…): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

• React Warning: validateDOMNesting(…): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of your source code.