Verschachteltes DOM auf der Einsatz-Detailseite: <p> enthält <div> #12

New Issue

2026-09-04T09:23:53Z

florian.wilde commented

2026-09-04 09:23:53 +00:00

Beobachtung

React meldet beim Öffnen eines Einsatzes:

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.

Die Meldung steht seit Phase 3 in der Konsole des Entwicklungsservers.

Warum das stört

Ein <div> in einem <p> ist kein gültiges HTML. Der Browser schließt den Absatz von sich aus vor dem <div> — der Baum, den er baut, sieht anders aus als der, den React erwartet. Das ist der klassische Auslöser für einen Hydration-Fehler: die Seite wird nach dem Laden noch einmal neu aufgebaut, und der Zustand von Formularfeldern geht dabei verloren.

Dass es bisher nicht aufgefallen ist, heißt nur, dass es an dieser Stelle keine Formularfelder trifft.

Vermutete Stelle

src/app/(app)/einsaetze/[id]/einsatz-detail.tsx — vermutlich eine CardDescription (rendert <p>), in der ein Abzeichen oder eine Zeile mit eigenem Rahmen steht.

Lösungsvorschlag

Die betroffene Stelle suchen und den Absatz durch ein <div> ersetzen, das dieselben Klassen trägt. Danach die Konsole bei geöffnetem Einsatz gegenlesen — es kann mehr als eine Stelle sein.

Mit der ESLint-Konfiguration aus dem Nachbar-Issue wäre so etwas künftig zu sehen, bevor es jemand in der Konsole entdeckt.

Betrifft

src/app/(app)/einsaetze/[id]/einsatz-detail.tsx

## Beobachtung React meldet beim Öffnen eines Einsatzes: ``` In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error. ``` Die Meldung steht seit Phase 3 in der Konsole des Entwicklungsservers. ## Warum das stört Ein `<div>` in einem `<p>` ist kein gültiges HTML. Der Browser schließt den Absatz von sich aus vor dem `<div>` — der Baum, den er baut, sieht anders aus als der, den React erwartet. Das ist der klassische Auslöser für einen Hydration-Fehler: die Seite wird nach dem Laden noch einmal neu aufgebaut, und der Zustand von Formularfeldern geht dabei verloren. Dass es bisher nicht aufgefallen ist, heißt nur, dass es an dieser Stelle keine Formularfelder trifft. ## Vermutete Stelle `src/app/(app)/einsaetze/[id]/einsatz-detail.tsx` — vermutlich eine `CardDescription` (rendert `<p>`), in der ein Abzeichen oder eine Zeile mit eigenem Rahmen steht. ## Lösungsvorschlag Die betroffene Stelle suchen und den Absatz durch ein `<div>` ersetzen, das dieselben Klassen trägt. Danach die Konsole bei geöffnetem Einsatz gegenlesen — es kann mehr als eine Stelle sein. Mit der ESLint-Konfiguration aus dem Nachbar-Issue wäre so etwas künftig zu sehen, bevor es jemand in der Konsole entdeckt. ## Betrifft `src/app/(app)/einsaetze/[id]/einsatz-detail.tsx`

florian.wilde referenced this issue from a commit

2026-09-04 11:25:12 +00:00

Aufraeumarbeiten: ESLint, DOM-Verschachtelung, eigene Testwehr

florian.wilde referenced a pull request that will close this issue

2026-09-04 11:25:53 +00:00

Aufräumarbeiten: ESLint, DOM-Verschachtelung, eigene Testwehr #13

florian.wilde added the zu-testen label 2026-09-04 11:26:10 +00:00

florian.wilde closed this issue

2026-09-04 13:43:54 +00:00

florian.wilde removed the zu-testen label 2026-09-04 13:44:20 +00:00

Sign in to join this conversation.