Bedingtes Rendern in React: if, ternär, && und null

Bedingtes Rendern in React bedeutet, mit gewöhnlichem JavaScript auszuwählen, was eine Komponente zurückgibt: eine if-Anweisung vor dem return, ein ternärer Operator cond ? a : b im JSX oder cond && <Thing />, um etwas oder nichts zu zeigen. Eine besondere Template-Syntax musst du nicht lernen.

import { useState } from 'react';

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            <p>{isLoggedIn ? 'Welcome back, Ada.' : 'Please log in.'}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Log out' : 'Log in'}
            </button>
        </div>
    );
}

Klicke auf den Button, und sowohl die Nachricht als auch das Label wechseln, weil jeder ternäre Operator beim nächsten Render einen anderen String wählt. Ändere useState(false) zu useState(true), und die Vorschau startet eingeloggt.

if-Anweisungen und frühes return

Geschweifte Klammern in JSX nehmen Ausdrücke an, keine Anweisungen, also kannst du kein {if (x) ...} ins Markup schreiben. Vor dem return kannst du jedes beliebige if schreiben. Wenn ein ganzer Zustand der Komponente anders aussieht (Laden, Fehler, leer), gib für jeden Fall früh zurück und behalte das Haupt-Markup für den normalen Fall.

import { useState } from 'react';

function Inbox({ status, messages }) {
    if (status === 'loading') {
        return <p>Loading messages...</p>;
    }
    if (status === 'error') {
        return <p style={{ color: 'crimson' }}>Could not load your inbox.</p>;
    }
    if (messages.length === 0) {
        return <p>No messages yet.</p>;
    }
    return (
        <ul>
            {messages.map((m) => (
                <li key={m}>{m}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [status, setStatus] = useState('loading');
    const [messages, setMessages] = useState([]);

    return (
        <div>
            <button onClick={() => setStatus('loading')}>Loading</button>{' '}
            <button onClick={() => setStatus('error')}>Error</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages([]); }}>Empty</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages(['Hi', 'Lunch?']); }}>
                Loaded
            </button>
            <Inbox status={status} messages={messages} />
        </div>
    );
}

Jeder Button versetzt den Posteingang in einen anderen Zustand, und jeder Zustand hat seinen eigenen kurzen, lesbaren Zweig. Frühes return hält den Normalfall ohne Verschachtelung am Ende.

Ternäre Operatoren im JSX

Wenn sich nur ein kleiner Teil des Markups ändert, hält ein ternärer Operator inline alles zusammen: {isOpen ? <CloseIcon /> : <MenuIcon />}. Für zwei Optionen funktionieren ternäre Operatoren gut. Verschachtelte für drei oder mehr werden schnell schwer lesbar:

// Hard to follow
{status === 'loading' ? <Spinner /> : status === 'error' ? <ErrorBox /> : <List />}

Wenn du so etwas siehst, verschiebe die Logik in eine if-Kette vor dem return (wie oben) oder in eine Objekt-Map (weiter unten).

&& und die verirrte 0

cond && <Thing /> rendert <Thing />, wenn cond truthy ist, und nichts, wenn es false ist. Das funktioniert, weil && seine linke Seite zurückgibt, wenn diese falsy ist, und React für false, null und undefined nichts rendert.

Die Falle: 0 ist auch falsy, und Zahlen rendert React sehr wohl. Also setzt count && <Badge /> bei einem Zähler von 0 eine wörtliche 0 auf die Seite.

import { useState } from 'react';

export default function App() {
    const [unread, setUnread] = useState(0);

    return (
        <div>
            <p>
                Broken: {unread && <b>{unread} unread</b>}
            </p>
            <p>
                Fixed: {unread > 0 && <b>{unread} unread</b>}
            </p>
            <button onClick={() => setUnread(unread + 1)}>New message</button>{' '}
            <button onClick={() => setUnread(0)}>Mark all read</button>
        </div>
    );
}

Ohne ungelesene Nachrichten zeigt die erste Zeile „Broken: 0“, während die zweite nach „Fixed:“ nichts zeigt. Klicke auf New message, und beide stimmen überein; klicke auf Mark all read, und die 0 ist zurück. Die Lösung ist, && einen echten Boolean zu geben: unread > 0, items.length > 0 oder Boolean(unread). Ein leerer String '' hat im Prinzip dasselbe Problem, rendert aber nichts Sichtbares, also fällt es dir selten auf.

null zurückgeben

Eine Komponente kann null zurückgeben, um nichts zu rendern. Ein Warnbanner, das nur erscheint, wenn es etwas zu warnen gibt, passt gut: Das Elternteil rendert immer <Warning />, und die Komponente entscheidet.

import { useState } from 'react';

function Warning({ message }) {
    console.log('Warning rendered, message =', message);
    if (!message) {
        return null;
    }
    return (
        <p style={{ background: '#fff4d6', padding: 8, borderRadius: 6 }}>{message}</p>
    );
}

export default function App() {
    const [message, setMessage] = useState('');

    return (
        <div>
            <Warning message={message} />
            <button onClick={() => setMessage('Your trial ends tomorrow.')}>Warn</button>{' '}
            <button onClick={() => setMessage('')}>Dismiss</button>
        </div>
    );
}

Achte auf die Konsole: Die Funktion Warning loggt bei jedem Render, auch bei denen, in denen sie null zurückgibt. null zurückzugeben überspringt die Ausgabe, nicht die Arbeit. Ihre Hooks und Effekte laufen trotzdem, also entscheide im Elternteil und rendere sie gar nicht, wenn eine Komponente teuer ist oder etwas startet (einen Timer, ein Abonnement).

JSX in einer Variablen speichern

JSX ist ein Wert, also kannst du es einer Variablen zuweisen, mit if-Anweisungen aufbauen und später ins Markup setzen. Das hilft, wenn ein Teil eines größeren Layouts von mehreren Bedingungen abhängt.

function Checkout({ cart, user }) {
    let action;
    if (!user) {
        action = <a href="/login">Log in to check out</a>;
    } else if (cart.length === 0) {
        action = <p>Your cart is empty.</p>;
    } else {
        action = <button>Pay now</button>;
    }

    return (
        <section>
            <h2>Your cart</h2>
            {action}
        </section>
    );
}

Mit einem Objekt zwischen mehreren Komponenten wählen

Wenn die Wahl „eine von vielen“ lautet, ist ein Objekt, das jedem Wert eine Komponente zuordnet, kürzer als eine lange if-Kette oder ein switch, und ein neuer Fall ist eine Zeile.

import { useState } from 'react';

function Profile() {
    return <p>Name: Ada Lovelace</p>;
}
function Billing() {
    return <p>Plan: Pro, renews on 1 May</p>;
}
function Security() {
    return <p>Two-factor login is on.</p>;
}

const TABS = { profile: Profile, billing: Billing, security: Security };

export default function App() {
    const [tab, setTab] = useState('profile');
    const Panel = TABS[tab];

    return (
        <div>
            {Object.keys(TABS).map((name) => (
                <button
                    key={name}
                    onClick={() => setTab(name)}
                    style={{ fontWeight: tab === name ? 700 : 400, marginInlineEnd: 6 }}
                >
                    {name}
                </button>
            ))}
            <Panel />
        </div>
    );
}

TABS[tab] wählt eine Komponente, und <Panel /> rendert sie. Die Variable muss mit einem Großbuchstaben beginnen: JSX behandelt <panel /> als HTML-Tag. Füge TABS einen Eintrag notifications mit eigener Komponente hinzu, und ein vierter Button erscheint.

Verstecken ist nicht dasselbe wie nicht Rendern

Es gibt zwei Wege, etwas verschwinden zu lassen, und sie verhalten sich unterschiedlich. show && <Counter /> entfernt die Komponente aus dem Baum, wenn show false ist. React unmountet sie und verwirft ihren State, also beginnt sie von vorn, wenn sie zurückkommt. Mit CSS verstecken (style={{ display: show ? 'block' : 'none' }}) lässt sie gemountet, also bleibt ihr State erhalten.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <p>
            {label}: <button onClick={() => setCount(count + 1)}>{count}</button>
        </p>
    );
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <label>
                <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} />
                Show counters
            </label>
            {show && <Counter label="Removed with &&" />}
            <div style={{ display: show ? 'block' : 'none' }}>
                <Counter label="Hidden with CSS" />
            </div>
        </div>
    );
}

Klicke beide Zähler ein paar Mal an, entferne das Häkchen und setze es dann wieder. Der erste Zähler steht wieder auf 0, der zweite hat noch seine Zahl. Keins von beiden ist falsch: Entfernen passt für ein Formular, das jedes Mal leer beginnen soll, Verstecken passt für Tabs, deren Scrollposition oder Eingabe erhalten bleiben soll. Die Seite zum Rendern erklärt, wie React entscheidet, dass eine Komponente zwischen Renders dieselbe ist.

React 19.2 bringt eine dritte Option, <Activity mode="hidden">, die ihre Kinder versteckt und ihren State wie CSS behält und außerdem ihre Effekte aufräumt, bis sie wieder gezeigt werden.

Bedingte Props und Attribute

Bei Bedingungen geht es nicht nur darum, welche Elemente erscheinen. Jede Prop kann einen berechneten Wert annehmen, also reicht oft ein ternärer Operator oder ein Vergleich im Attribut:

<button disabled={!canSave} className={hasError ? 'field error' : 'field'}>
    Save
</button>
<input aria-invalid={hasError} placeholder={user ? user.email : 'you@example.com'} />

Wenn der Wert einer Prop undefined ist, lässt React das Attribut ganz weg, ein sauberer Weg, ein Attribut nur manchmal hinzuzufügen: title={isTruncated ? fullText : undefined}. Bei booleschen Attributen wie disabled und checked übergibst du true oder false, und React fügt sie hinzu oder entfernt sie.

Bedingungen in Listen

Um Einträge aus einer Liste wegzulassen, filtere das Array vor dem Mapping, statt in map null zurückzugeben. items.filter((i) => i.done).map(...) liest sich so, wie es arbeitet, und die Seite zu Listen und Keys zeigt es in einem laufenden Beispiel.