validateDOMNesting ⚛️ React

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

The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.

Seen on: React

Meaning

Browsers auto-correct invalid nesting (closing a <p> before a <div>), so the DOM differs from React’s tree. <a> in <a>, <div> in <p>, <tr> directly in <table> are typical.

Common causes

  • Block elements inside <p>
  • Nested <a> or <button> elements
  • Table rows without <tbody>
  • Library components rendering <div> inside your <p>

⚡ Quick fix

  1. Change the outer <p> to <div>
  2. Avoid nesting interactive elements
  3. Add <tbody> in tables

Detailed fix by platform

React

  1. <Typography component="div">…</Typography>

How to diagnose

  1. Elements — Which parent/child pair?
  2. Recent change — Did it start after a deploy, upgrade, or configuration change? Compare with the last working version.

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.