Le key sono importanti
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 36 di 42.
Ogni elemento restituito da map deve avere una key, un'etichetta stabile e univoca per quell'elemento:
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}Perché? Quando l’array cambia, React confronta il nuovo elenco con quello precedente. Le chiavi gli indicano quale elemento è quale, così sposta gli elementi invece di ricrearli, mantenendo intatti lo stato, il focus e le animazioni.
Chiave migliore: un id reale dei tuoi dati. Accettabile: qualsiasi valore univoco e stabile per elemento (come i nostri nomi di frutta). Ultima risorsa: l’indice dell’array. Crea problemi quando cambi l’ordine, perché la posizione non è un’identità.
Provalo tu
Questa lezione non include una sfida di codice.
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React4Props
Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props7Condizioni e liste
Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX