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

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

For instance, we instead of writing:

<p>
    <div></div>
</p>

which is invalid HTML, we write:

<p></p>
<div></div>

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