Liste, key e rendering condizionale
Renderizzare array di elementi con .map(), fornire props key stabili e renderizzare condizionalmente gli elementi con && e l’operatore ternario.
Liste, key e rendering condizionale è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Rendering di elenchi con .map()
Visualizzi un elenco dinamico chiamando .map() su un array e restituendo JSX per ogni elemento. React visualizza un array di elementi proprio come un singolo elemento.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);La prop key — Perché è importante
key è una prop speciale di React che lo aiuta a identificare gli elementi di un elenco che sono cambiati, sono stati aggiunti o sono stati rimossi. Senza key, oppure usando key instabili come gli indici, React potrebbe produrre aggiornamenti errati.
Key corrette e scorrette
Key corrette: ID univoci e stabili provenienti dai dati, ad esempio item.id. Key scorrette: gli indici dell'array, perché gli elementi possono essere riordinati, o valori casuali, che cambiano a ogni rendering.
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Rendering di oggetti
Mappi un array di oggetti in componenti, destrutturando l'oggetto nelle props.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Rendering condizionale con &&
Utilizzi l'operatore di short-circuit && per includere JSX in modo condizionale. Se il lato sinistro è falsy, non viene visualizzato nulla. Presti attenzione ai numeri falsy: 0 viene visualizzato come '0'.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Rendering condizionale con il ternario
Utilizzi l'operatore ternario per visualizzare uno di due elementi in base a una condizione.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Rendering condizionale con un'istruzione if
Per condizioni complesse, utilizzi un'istruzione if prima del return. Restituisca subito il risultato per gli stati di caricamento o di errore.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Filtrare prima di mappare
Filtri l'array prima di applicare il mapping, così da visualizzare solo gli elementi corrispondenti. Il risultato è chiaro e leggibile.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Stato vuoto
Gestisca sempre il caso di un array vuoto. Visualizzare silenziosamente un elenco vuoto può creare confusione: mostri invece un messaggio utile per lo stato vuoto.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Portali di rendering per le liste
Le liste lunghe che devono essere visualizzate in un nodo DOM diverso, ad esempio un menu a discesa, possono usare ReactDOM.createPortal. Tuttavia, nella maggior parte dei casi, il rendering delle liste avviene direttamente nell'albero.
Liste virtualizzate per le prestazioni
Per liste molto lunghe, con più di 1.000 elementi, utilizzi una libreria di virtualizzazione come react-window o @tanstack/react-virtual. Queste librerie eseguono il rendering solo delle righe visibili, evitando problemi di prestazioni del DOM.
Verifica rapida
Quando è accettabile usare l'indice dell'array come key nelle liste React?
Riepilogo: liste e rendering condizionale
Esegua il rendering delle liste con .map(). Aggiunga sempre prop key univoche e stabili. Usi && per gli elementi opzionali, facendo attenzione a 0. Usi l'operatore ternario per scegliere tra due alternative. Usi i ritorni anticipati per gli stati di caricamento o errore. Filtri prima del mapping per le liste condizionali. Mostri un messaggio appropriato quando gli array sono vuoti. Virtualizzi le liste molto lunghe.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Liste, key e rendering condizionale» è gratuita?
Sì — il testo completo di «Liste, key e rendering condizionale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Liste, key e rendering condizionale»?
Renderizzare array di elementi con .map(), fornire props key stabili e renderizzare condizionalmente gli elementi con && e l’operatore ternario. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Liste, key e rendering condizionale»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- JSX: sintassi e transpilation
- Componenti funzionali e props
- Hook useState: stato e re-render
- Liste, key e rendering condizionale