validateDOMNesting React Origin: On your device Last updated 13 Oct 2026

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

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

Exact message you may see cannot appear as a descendant ofIn HTML, <div> cannot be a descendant of <p>
Explore the map of this error Full error map →
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 not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Adjacent JSX elements — Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (React)Adjacent JSX elementsHydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failednot wrapped in act — Warning: An update to Component inside a test was not wrapped in act(...) (React)not wrapped in actProp did not match — Warning: Prop `className` did not match. Server: "x" Client: "y" (React)Prop did not matchsetState during render — Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`) (React)setState during renderuncontrolled to controlled — Warning: A component is changing an uncontrolled input to be controlled (React)uncontrolled to contr…useLayoutEffect SSR — Warning: useLayoutEffect does nothing on the server (React)useLayoutEffect SSRvalidateD…

Explore the map of this error Full error map →

🧠 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.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.