Conditional Rendering

if/else vor dem return

Wenn die Bedingung komplex ist oder mehrere Variablen vorbelegt werden müssen, kommt klassisches if/else vor dem return zum Einsatz.

const Greeting = () => {
    const username = 'John';
    const stunde = new Date().getHours();

    let greeting;
    if (stunde < 12) {
        greeting = 'Guten Morgen';
    } else if (stunde < 18) {
        greeting = 'Guten Tag';
    } else {
        greeting = 'Guten Abend';
    }

    return <p>{greeting}, {username}</p>;
};

Vorteil: alle JavaScript-Konstrukte sind verfügbar (if/else if/else, switch, Block-Statements). Nachteil: man muss eine Variable vor dem return deklarieren.

Ternary im JSX

In JSX selbst sind nur Expressions erlaubt — keine if-Statements. Der Ternary-Operator cond ? A : B ist die Standard-Form, eine Bedingung inline zu schreiben.

const Greeting = ({ username }) => {
    const stunde = new Date().getHours();

    return (
        <>
            {stunde < 12 ? (
                <p>Guten Morgen, {username}</p>
            ) : stunde < 18 ? (
                <p>Guten Tag, {username}</p>
            ) : (
                <p>Guten Abend, {username}</p>
            )}
        </>
    );
};

Verschachtelte Ternaries sind möglich, werden aber schnell unleserlich. Faustregel: maximal zwei Stufen. Bei mehr Branches: in eine Helper-Funktion auslagern oder die if/else-Variante davor nutzen.

&&-Short-Circuit für optionales Rendern

Wenn nur eine Sache gerendert werden soll, falls eine Bedingung wahr ist, ist cond && JSX die kürzeste Form.

const ItemList = ({ items }) => {
    return (
        <div className="items-wrapper">
            {items.length > 0 && (
                <ul>
                    {items.map((item, idx) => (
                        <li key={idx}>{item}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

Die Liste wird nur gerendert, wenn items.length > 0 truthy ist. Andernfalls produziert && false — und React rendert false als nichts.

Wichtige Falle: && mit einer Zahl kann unbeabsichtigt rendern.

// FALLE: bei items.length === 0 rendert React die 0!
<div>{items.length && <List items={items} />}</div>
// → DOM enthält "0" als Textknoten

// KORREKT: explizite Boolean-Konvertierung
<div>{items.length > 0 && <List items={items} />}</div>
// oder
<div>{!!items.length && <List items={items} />}</div>

&& gibt den linken Operanden zurück, wenn er falsy ist — und 0 ist zwar falsy, aber React rendert es als String "0". Daher immer mit explizitem Vergleich arbeiten.

Ternary für Fallback-UI

Wenn man je nach Zustand zwei verschiedene UIs anzeigen will (z.B. eine Liste oder eine „Leer"-Meldung), ist Ternary die saubere Form.

const ItemList = ({ items }) => {
    return (
        <div className="items-wrapper">
            {items.length > 0 ? (
                <ul>
                    {items.map((item, idx) => (
                        <li key={idx}>{item}</li>
                    ))}
                </ul>
            ) : (
                <p>Keine Elemente vorhanden</p>
            )}
        </div>
    );
};

Verbreitetes Pattern für Loading-States: isLoading ? <Spinner /> : <Content />.

Early Return — ganze Komponente entscheidet

Wenn eine Komponente komplett unterschiedliche UI rendert je nach Zustand, ist ein Early Return vor dem Haupt-Return oft die lesbarste Form.

const UserPage = ({ user, isLoading, error }) => {
    if (isLoading) return <Spinner />;
    if (error) return <ErrorBanner message={error.message} />;
    if (!user) return <p>Bitte einloggen.</p>;

    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
};

Das Pattern heißt auch Guard Clauses — alle Edge-Cases werden vorab abgefangen, der Haupt-Pfad bleibt geradeaus und übersichtlich.

Lookup-Map statt verschachtelter if-Kette

Bei vielen diskreten Zuständen lohnt sich eine Lookup-Map — ein Object, das pro Schlüssel die zugehörige Komponente liefert.

const icons = {
    success: <CheckIcon />,
    warning: <WarnIcon />,
    error: <ErrorIcon />,
    info: <InfoIcon />,
};

const StatusIcon = ({ type }) => {
    return icons[type] ?? <DefaultIcon />;
};

Vorteil gegenüber einer langen switch- oder if-Kette: neue Stati hinzufügen heißt eine Zeile im Object, keine neue if-Verzweigung.

Verstecken vs. nicht rendern

Wichtige Unterscheidung: nicht rendern (cond && <X />) vs. rendern und verstecken (<X style={{display: 'none'}}/>).

• Nicht rendern: Komponente existiert gar nicht im DOM. State und Effects sind weg, beim nächsten true wird sie neu mounted.
• Verstecken: Komponente bleibt im DOM, State bleibt erhalten, nur visuell weg.

// Nicht gerendert — State wird verworfen
{open && <ExpensiveModal />}

// Gerendert, aber versteckt — State bleibt
<ExpensiveModal hidden={!open} />

Die richtige Wahl hängt vom Use-Case ab. Bei teuren Komponenten mit wichtigem State (z.B. Modals mit Formular-Eingaben): verstecken statt unmounten.

Weiterführende Ressourcen

Externe Quellen

• Conditional Rendering – react.dev
• Rendering Lists – react.dev
• Logical AND Operator – MDN

Verwandte Artikel

• Props
• Schleifen
• Element-Kontrolle
• Fragments
• JSX – Syntax und Regeln