Bedingtes Rendering

Deine Komponenten müssen oft verschiedene Dinge anzeigen — je nach Zustand, Daten oder Benutzerinteraktion. In React verwendest du dafür ganz normales JavaScript: if-Statements, &&, Ternary-Operator und mehr.

Bedingtes Rendering mit `if`

Manchmal soll eine Komponente in bestimmten Fällen etwas komplett anderes zurückgeben. Dafür eignet sich ein normales if-Statement:

function StudentStatus({ istBestanden }) {
  if (istBestanden) {
    return <p className="success">Bestanden</p>;
  }
  return <p className="danger">Nicht bestanden</p>;
}

Je nach Wert von istBestanden gibt die Komponente unterschiedliches JSX zurück. Das nennt man Early Return — der erste return beendet die Funktion sofort.

Nichts rendern mit `null`

Wenn eine Komponente in bestimmten Fällen gar nichts anzeigen soll, gib null zurück:

function Warnung({ nachricht }) {
  if (!nachricht) {
    return null;
  }
  return <p className="warnung">{nachricht}</p>;
}

<Warnung nachricht="Achtung!" /> zeigt den Text, <Warnung /> rendert nichts.

Ternary-Operator: Entweder A oder B

Wenn du innerhalb von JSX zwischen zwei Varianten wählen willst, verwende den Ternary-Operator ? ::

function StudentCard({ name, istAktiv }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <span>{istAktiv ? "Aktiv" : "Inaktiv"}</span>
    </div>
  );
}

Das funktioniert auch mit ganzen JSX-Blöcken:

function StudentCard({ name, istAktiv }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      {istAktiv
        ? <p className="badge aktiv">Eingeschrieben</p>
        : <p className="badge inaktiv">Exmatrikuliert</p>
      }
    </div>
  );
}

CSS-Klassen bedingt setzen

Ein besonders häufiger Anwendungsfall ist das bedingte Setzen von CSS-Klassen:

function StudentCard({ name, istAktiv }) {
  return (
    <div className={`card ${istAktiv ? "aktiv" : "inaktiv"}`}>
      <h2>{name}</h2>
    </div>
  );
}

`&&`-Operator: Zeigen oder nichts

Wenn du etwas nur bei einer Bedingung anzeigen willst und es kein „sonst” gibt, ist && die kompakteste Lösung:

function StudentCard({ name, stipendium }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      {stipendium && <p className="badge">Stipendiat</p>}
    </div>
  );
}

Wenn stipendium truthy ist, wird das <p> gerendert. Wenn nicht, wird nichts angezeigt.

Übergib keine Zahl als linken Operand an && — die Zahl 0 ist falsy, wird aber von React als Text gerendert:

// Fehler: zeigt "0" im DOM wenn count === 0
{count && <p>{count} Ergebnisse</p>}

// Richtig: expliziter Vergleich ergibt true/false
{count > 0 && <p>{count} Ergebnisse</p>}

`||` und `??`: Fallback-Werte

Verwende || oder ??, um Standardwerte zu setzen, wenn ein Wert fehlt:

function StudentCard({ name, fach }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{fach || "Kein Fach angegeben"}</p>
    </div>
  );
}

Denk daran: || ersetzt alle falsy Werte (0, "", null, undefined). Wenn 0 oder "" gültige Werte sein können, verwende ??:

function Ergebnis({ punkte }) {
  return <p>Punkte: {punkte ?? "Nicht bewertet"}</p>;
}

// <Ergebnis punkte={0} />    → "Punkte: 0"
// <Ergebnis />               → "Punkte: Nicht bewertet"

Variablen für komplexe Bedingungen

Wenn die Logik komplexer wird, lagere sie in eine Variable aus, statt alles in JSX zu quetschen:

function StudentCard({ student }) {
  let statusBadge;
  if (student.note <= 1.5) {
    statusBadge = <span className="badge gold">Auszeichnung</span>;
  } else if (student.note <= 2.5) {
    statusBadge = <span className="badge silber">Gut</span>;
  } else if (student.note <= 4.0) {
    statusBadge = <span className="badge">Bestanden</span>;
  } else {
    statusBadge = <span className="badge rot">Nicht bestanden</span>;
  }

  return (
    <div className="card">
      <h2>{student.name}</h2>
      {statusBadge}
    </div>
  );
}

Das ist lesbarer als verschachtelte Ternaries — und du kannst die gesamte if/else-Logik von JavaScript nutzen.

Mehrere Bedingungen kombinieren

In der Praxis hat eine Komponente oft mehrere unabhängige Bedingungen:

function StudentCard({ student }) {
  return (
    <div className={`card ${student.istAktiv ? "aktiv" : "inaktiv"}`}>
      <h2>{student.name}</h2>
      <p>{student.fach ?? "Kein Fach"}</p>
      {student.stipendium && <p className="badge">Stipendiat</p>}
      {student.note != null
        ? <p>Note: {student.note}</p>
        : <p>Noch nicht bewertet</p>
      }
      {student.kommentar?.length > 0 && (
        <p className="kommentar">{student.kommentar}</p>
      )}
    </div>
  );
}

Jede Zeile verwendet den Operator, der am besten zur Situation passt:

Situation	Operator
Entweder A oder B	`bedingung ? <A /> : <B />`
Zeigen oder nichts	`bedingung && <JSX />`
Wert oder Fallback (nur null/undefined)	`wert ?? fallback`
Wert oder Fallback (alle falsy)	`wert \|\| fallback`
Sicherer Zugriff auf verschachtelte Daten	`objekt?.eigenschaft`
Viele Fälle / komplexe Logik	`if/else` + Variable

Bedingtes Rendering