Rendu conditionnel React : if, ternaire, && et null

Le rendu conditionnel en React consiste à choisir ce qu'un composant renvoie avec du JavaScript ordinaire : une instruction if avant le return, un ternaire cond ? a : b dans le JSX, ou cond && <Thing /> pour afficher quelque chose ou rien. Il n'y a aucune syntaxe de template spéciale à apprendre.

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>
    );
}

Cliquez sur le bouton et le message comme le libellé changent, car chaque ternaire choisit une chaîne différente au rendu suivant. Remplacez useState(false) par useState(true) et l'aperçu démarre connecté.

Instructions if et retours anticipés

Les accolades du JSX acceptent des expressions, pas des instructions, vous ne pouvez donc pas écrire {if (x) ...} dans le balisage. Vous pouvez écrire tous les if que vous voulez avant le return. Quand un état entier du composant est différent (chargement, erreur, vide), faites un retour anticipé pour chaque cas et gardez le balisage principal pour le cas normal.

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>
    );
}

Chaque bouton met la boîte de réception dans un état différent, et chaque état a sa propre branche courte et lisible. Les retours anticipés gardent le cas nominal en bas, sans imbrication.

Ternaires dans le JSX

Quand seule une petite partie du balisage change, un ternaire inline la garde groupée : {isOpen ? <CloseIcon /> : <MenuIcon />}. Les ternaires conviennent bien pour deux options. Des ternaires imbriqués pour trois options ou plus deviennent vite difficiles à lire :

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

Quand vous voyez cela, déplacez la logique dans une chaîne de if avant le return (comme ci-dessus) ou dans une table d'objets (plus bas).

&& et le 0 égaré

cond && <Thing /> affiche <Thing /> quand cond est truthy et rien quand il vaut false. Cela marche parce que && renvoie son côté gauche quand celui-ci est falsy, et que React n'affiche rien pour false, null et undefined.

Le piège, c'est que 0 est falsy aussi, et que React affiche bien les nombres. Donc count && <Badge /> avec un compteur à 0 met un 0 littéral sur la page.

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>
    );
}

Sans message non lu, la première ligne affiche "Broken: 0" tandis que la seconde n'affiche rien après "Fixed:". Cliquez sur New message et les deux concordent ; cliquez sur Mark all read et le 0 revient. La solution est de donner un vrai booléen à && : unread > 0, items.length > 0 ou Boolean(unread). Une chaîne vide '' pose en principe le même problème, mais elle ne s'affiche pas visiblement, vous le remarquez donc rarement.

Renvoyer null

Un composant peut renvoyer null pour ne rien afficher. Une bannière d'avertissement qui n'apparaît que lorsqu'il y a quelque chose à signaler s'y prête bien : le parent affiche toujours <Warning /> et c'est le composant qui décide.

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>
    );
}

Regardez la console : la fonction Warning écrit un message à chaque rendu, y compris ceux où elle renvoie null. Renvoyer null saute l'affichage, pas le travail. Ses hooks et ses effets s'exécutent quand même, donc si un composant est coûteux ou démarre quelque chose (un minuteur, un abonnement), décidez dans le parent et ne l'affichez pas du tout.

Stocker du JSX dans une variable

Le JSX est une valeur, vous pouvez donc l'affecter à une variable, la construire avec des instructions if et l'insérer plus tard dans le balisage. C'est utile quand un morceau d'une mise en page plus grande dépend de plusieurs conditions.

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>
    );
}

Choisir entre plusieurs composants avec un objet

Quand le choix est « un parmi plusieurs », un objet qui associe chaque valeur à un composant est plus court qu'une longue chaîne de if ou qu'un switch, et ajouter un cas prend une ligne.

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] choisit un composant, et <Panel /> l'affiche. La variable doit commencer par une majuscule : le JSX traite <panel /> comme une balise HTML. Ajoutez une entrée notifications à TABS avec son propre composant et un quatrième bouton apparaît.

Masquer n'est pas la même chose que ne pas afficher

Il existe deux façons de faire disparaître quelque chose, et elles se comportent différemment. show && <Counter /> retire le composant de l'arbre quand show est faux. React le démonte et jette son état, il repart donc de zéro quand il revient. Le masquer avec du CSS (style={{ display: show ? 'block' : 'none' }}) le garde monté, et son état survit.

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>
    );
}

Cliquez quelques fois sur les deux compteurs, décochez la case, puis cochez-la à nouveau. Le premier compteur est revenu à 0 et le second garde son nombre. Aucun des deux n'a tort : retirer convient à un formulaire qui doit repartir vide à chaque fois, masquer convient à des onglets dont la position de défilement ou la saisie doit être conservée. La page sur le rendu explique comment React décide qu'un composant est le même d'un rendu à l'autre.

React 19.2 ajoute une troisième option, <Activity mode="hidden">, qui masque ses enfants et conserve leur état comme le CSS, et nettoie aussi leurs effets jusqu'à ce qu'ils soient de nouveau affichés.

Props et attributs conditionnels

Les conditions ne concernent pas seulement les éléments qui apparaissent. N'importe quelle prop peut prendre une valeur calculée, donc un ternaire ou une comparaison dans un attribut suffit souvent :

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

Quand la valeur d'une prop est undefined, React omet entièrement l'attribut, ce qui est une façon propre d'ajouter un attribut seulement dans certains cas : title={isTruncated ? fullText : undefined}. Pour les attributs booléens comme disabled et checked, passez true ou false et React les ajoute ou les retire.

Conditions dans les listes

Pour exclure des éléments d'une liste, filtrez le tableau avant de le parcourir plutôt que de renvoyer null dans map. items.filter((i) => i.done).map(...) se lit comme ce qu'il fait, et la page sur les listes et les keys le montre dans un exemple exécutable.