Lister, nøkler og betinget rendering
Rendrer arrayer med elementer med .map(), oppgi stabile key-props, og rendrer elementer betinget med && og ternary-operatoren.
Lister, nøkler og betinget rendering er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Rendring av lister med .map()
Rendre en dynamisk liste ved å kalle .map() på en array og returnere JSX for hvert element. React rendrer en array med elementer på samme måte som ett enkelt element.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);key-propen — hvorfor den er viktig
key er en spesiell React-prop som hjelper React med å identifisere hvilke elementer i en liste som er endret, lagt til eller fjernet. Uten nøkler, eller med ustabile nøkler som indekser, kan React utføre oppdateringer som gir feil resultat.
Gode og dårlige nøkler
Gode nøkler: unike, stabile ID-er fra dataene dine (for eksempel item.id). Dårlige nøkler: array-indekser (elementer kan omorganiseres) eller tilfeldige verdier (endres ved hver rendring).
// 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} />)}Rendre objekter
Map en array med objekter til komponenter ved å destrukturere objektet til 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>
);Betinget rendring med &&
Bruk kortslutningsoperatoren && for å ta med JSX betinget. Hvis venstresiden er falsy, rendres ingenting. Vær oppmerksom på falsy-tall – 0 rendres som «0».
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Betinget rendring med ternæroperator
Bruk ternæroperatoren til å rendre ett av to elementer basert på en betingelse.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Betinget rendring med if-setning
Bruk en if-setning før return for komplekse betingelser. Returner tidlig ved laste- eller feiltilstander.
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>
);
}Filtrering før mapping
Filtrer arrayen før mapping for å rendre bare elementer som passer. Dette er ryddig og lett å lese.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Tom tilstand
Håndter alltid tilfellet med en tom array. Det er forvirrende å rendre en tom liste uten forklaring – vis i stedet en nyttig melding for tom tilstand.
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>
);Rendring av portaler for lister
Lange lister som må vises i en annen DOM-node, for eksempel en rullegardinmeny, kan bruke ReactDOM.createPortal. Men det meste av listerendringen er rett frem i treet.
Virtualiserte lister for bedre ytelse
For svært lange lister (1 000 eller flere elementer) kan du bruke et virtualiseringsbibliotek som react-window eller @tanstack/react-virtual. De rendrer bare synlige rader og unngår ytelsesproblemer i DOM-en.
Rask kontroll
Når er det akseptabelt å bruke indeksen i arrayet som en key i React-lister?
Oppsummering: Lister og betinget rendering
Rendrer lister med .map(). Legg alltid til stabile, unike key-props. Bruk && for valgfrie elementer (pass på 0). Bruk ternary for valg mellom to alternativer. Bruk tidlige returneringer for loading- og error-tilstander. Filtrer før mapping for betingede lister. Vis en melding for tom tilstand når arrayet er tomt. Virtualiser svært lange lister.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Lister, nøkler og betinget rendering» gratis?
Ja – hele teksten i «Lister, nøkler og betinget rendering» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Lister, nøkler og betinget rendering»?
Rendrer arrayer med elementer med .map(), oppgi stabile key-props, og rendrer elementer betinget med && og ternary-operatoren. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Lister, nøkler og betinget rendering»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- JSX: syntaks og transpiling
- Funksjonelle komponenter og props
- useState-hooken: state og nye rendringer
- Lister, nøkler og betinget rendering