` while
the page is parsed. React then expects the element inside the paragraph and
does not find it. See
[div cannot be a descendant of p](https://hydration.jscrate.dev/docs/errors/div-cannot-be-a-descendant-of-p).
### Something else changed the page first
For `
` in ``, a browser extension or a third-party script (chat
widgets, consent banners) often inserted or removed elements before React
loaded. For `
` in ``, check tags rendered from browser-only values
and scripts that add their own tags. See
[browser extensions](https://hydration.jscrate.dev/docs/causes/extension) and
[third-party scripts](https://hydration.jscrate.dev/docs/causes/third-party-script).
## How to fix it
1. **Match the tags to your code.** The warning names the child and the
parent. The component stack names the component.
2. **Wrap table rows in `
`.** Before:
```tsx title="components/prices.tsx"
type Row = { id: string; name: string; price: string };
export function Prices({ rows }: { rows: Row[] }) {
return (
{rows.map((row) => (
| {row.name} |
{row.price} |
))}
);
}
```
After:
```tsx title="components/prices.tsx"
type Row = { id: string; name: string; price: string };
export function Prices({ rows }: { rows: Row[] }) {
return (
{rows.map((row) => (
| {row.name} |
{row.price} |
))}
);
}
```
3. **Render browser-only elements after hydration.** Before, the banner
exists only in the browser render:
```tsx title="components/cookie-banner.tsx"
"use client";
export function CookieBanner() {
if (typeof window === "undefined") return null;
if (localStorage.getItem("consent")) return null;
return We use cookies.
;
}
```
After, both renders start with nothing, and an effect shows it:
```tsx title="components/cookie-banner.tsx"
"use client";
import { useEffect, useState } from "react";
export function CookieBanner() {
const [show, setShow] = useState(false);
useEffect(() => {
setShow(!localStorage.getItem("consent"));
}, []);
if (!show) return null;
return We use cookies.
;
}
```
4. **Test in a clean browser profile** when the parent is `` or
``. If the warning disappears, an extension caused it.
## Find every instance
hydration-proof reports an element only the browser rendered as
[HP1009](https://hydration.jscrate.dev/docs/issues/hp1009), one only in the server HTML as
[HP1008](https://hydration.jscrate.dev/docs/issues/hp1008) and a different element in the same place as
[HP1007](https://hydration.jscrate.dev/docs/issues/hp1007). A missing `` and other repaired markup
is [HP3001](https://hydration.jscrate.dev/docs/issues/hp3001), and `` differences are
[HP1014](https://hydration.jscrate.dev/docs/issues/hp1014):
```bash
npx hydration-proof test
```
[`no-invalid-interactive-nesting`](https://hydration.jscrate.dev/docs/rules/no-invalid-interactive-nesting)
reports `` directly in `` and block elements in ``, and
[`no-window-render-branch`](https://hydration.jscrate.dev/docs/rules/no-window-render-branch) and
[`no-storage-in-initial-render`](https://hydration.jscrate.dev/docs/rules/no-storage-in-initial-render)
report the one-sided renders.
## Related
- [Hydration failed: initial UI does not match](https://hydration.jscrate.dev/docs/errors/hydration-failed-initial-ui-does-not-match)
- [Invalid HTML nesting and hydration](https://hydration.jscrate.dev/docs/causes/invalid-html)
- [Render a component only in the browser](https://hydration.jscrate.dev/docs/guides/client-only-component)
- [HP1009: element missing from the server HTML](https://hydration.jscrate.dev/docs/issues/hp1009)
- [All hydration error messages](https://hydration.jscrate.dev/docs/errors)