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

**Code:** `validateDOMNesting` · **Category:** React · **Seen on:** React

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

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

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/react/validatedomnesting)