Rendering condizionale in React: if, ternario, && e null

Il rendering condizionale in React significa scegliere ciò che un componente restituisce con normale JavaScript: un'istruzione if prima del return, un ternario cond ? a : b dentro il JSX, oppure cond && <Thing /> per mostrare qualcosa o niente. Non c'è nessuna sintassi di template speciale da imparare.

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

Clicca il pulsante e cambiano sia il messaggio sia l'etichetta, perché ogni ternario sceglie una stringa diversa al rendering successivo. Cambia useState(false) in useState(true) e l'anteprima parte con l'accesso già effettuato.

Istruzioni if e return anticipati

Le graffe di JSX accettano espressioni, non istruzioni, quindi non puoi scrivere {if (x) ...} dentro il markup. Puoi però scrivere qualsiasi if prima del return. Quando un intero stato del componente appare diverso (caricamento, errore, vuoto), esci in anticipo per ogni caso e tieni il markup principale per quello normale.

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

Ogni pulsante mette la casella di posta in uno stato diverso, e ogni stato ha il suo ramo breve e leggibile. I return anticipati tengono il percorso principale in fondo senza annidamenti.

Ternari dentro JSX

Quando cambia solo una piccola parte del markup, un ternario in linea la tiene insieme: {isOpen ? <CloseIcon /> : <MenuIcon />}. I ternari funzionano bene per due opzioni. I ternari annidati per tre o più diventano presto difficili da leggere:

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

Quando vedi una cosa del genere, sposta la logica in una catena di if prima del return (come sopra) o in una mappa a oggetto (più sotto).

&& e lo 0 di troppo

cond && <Thing /> renderizza <Thing /> quando cond è truthy e niente quando è false. Funziona perché && restituisce il suo lato sinistro quando quel lato è falsy, e React non renderizza nulla per false, null e undefined.

La trappola è che anche 0 è falsy, e React i numeri li renderizza. Quindi count && <Badge /> con un conteggio di 0 mette uno 0 letterale nella pagina.

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

Senza messaggi non letti la prima riga dice "Broken: 0" mentre la seconda non mostra nulla dopo "Fixed:". Clicca New message ed entrambe concordano; clicca Mark all read e lo 0 ritorna. La soluzione è dare a && un vero booleano: unread > 0, items.length > 0 o Boolean(unread). Una stringa vuota '' ha in teoria lo stesso problema, ma non produce nulla di visibile, quindi raramente te ne accorgi.

Restituire null

Un componente può restituire null per non renderizzare nulla. Un banner di avviso che compare solo quando c'è qualcosa da segnalare è un buon caso: il genitore renderizza sempre <Warning /> e il componente decide.

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

Guarda la console: la funzione Warning scrive un log a ogni rendering, compresi quelli in cui restituisce null. Restituire null salta l'output, non il lavoro. I suoi hook e i suoi effetti vengono comunque eseguiti, quindi se un componente è costoso o avvia qualcosa (un timer, una sottoscrizione), decidi nel genitore e non renderizzarlo affatto.

Salvare JSX in una variabile

JSX è un valore, quindi puoi assegnarlo a una variabile, costruirlo con istruzioni if e inserirlo nel markup più tardi. Questo aiuta quando una parte di un layout più grande dipende da diverse condizioni.

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

Scegliere tra più componenti con un oggetto

Quando la scelta è "uno tra tanti", un oggetto che associa ogni valore a un componente è più breve di una lunga catena di if o di uno switch, e aggiungere un caso richiede una riga.

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] sceglie un componente, e <Panel /> lo renderizza. La variabile deve iniziare con la maiuscola: JSX tratta <panel /> come un tag HTML. Aggiungi a TABS una voce notifications con il suo componente e compare un quarto pulsante.

Nascondere non equivale a non renderizzare

Ci sono due modi per far sparire qualcosa, e si comportano in modo diverso. show && <Counter /> rimuove il componente dall'albero quando show è false. React lo smonta e ne butta via lo stato, quindi riparte da zero quando ritorna. Nasconderlo con il CSS (style={{ display: show ? 'block' : 'none' }}) lo mantiene montato, quindi il suo stato sopravvive.

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

Clicca entrambi i contatori qualche volta, togli la spunta alla casella, poi rimettila. Il primo contatore è tornato a 0 e il secondo conserva ancora il suo numero. Nessuno dei due è sbagliato: rimuovere va bene per un form che deve ripartire vuoto ogni volta, nascondere va bene per schede di cui vuoi mantenere la posizione di scorrimento o l'input. La pagina sul rendering spiega come React decide che un componente è lo stesso tra un rendering e l'altro.

React 19.2 aggiunge una terza opzione, <Activity mode="hidden">, che nasconde i suoi figli e ne mantiene lo stato come fa il CSS, e in più pulisce i loro effetti finché non vengono mostrati di nuovo.

Props e attributi condizionali

Le condizioni non riguardano solo quali elementi compaiono. Qualsiasi prop può ricevere un valore calcolato, quindi un ternario o un confronto dentro un attributo spesso è tutto ciò che ti serve:

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

Quando il valore di una prop è undefined, React omette del tutto l'attributo, il che è un modo pulito per aggiungere un attributo solo a volte: title={isTruncated ? fullText : undefined}. Per gli attributi booleani come disabled e checked, passa true o false e React li aggiunge o li rimuove.

Condizioni nelle liste

Per escludere elementi da una lista, filtra l'array prima di applicare map invece di restituire null da dentro map. items.filter((i) => i.done).map(...) si legge esattamente per ciò che fa, e la pagina su liste e key lo mostra in un esempio funzionante.