Listor, keys och villkorsstyrd rendering
Rendera arrayer med element med .map(), ange stabila key-props och rendera villkorsstyrt med && och ternary-operatorn.
Listor, keys och villkorsstyrd rendering är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Rendera listor med .map()
Rendera en dynamisk lista genom att anropa .map() på en array och returnera JSX för varje objekt. React renderar en array med element på samma sätt som ett enskilt element.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);key-propen — varför den är viktig
key är en särskild React-prop som hjälper React att identifiera vilka objekt i en lista som har ändrats, lagts till eller tagits bort. Utan keys, eller med instabila keys som index, kan React göra felaktiga uppdateringar.
Bra och dåliga keys
Bra keys: unika, stabila ID:n från era data (till exempel item.id). Dåliga keys: arrayindex (objekt kan byta ordning) eller slumpmässiga värden (ändras vid varje 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} />)}Rendera objekt
Mappa en array med objekt till komponenter genom att destrukturera objektet till 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>
);Villkorsstyrd rendering med &&
Använd kortslutningsoperatorn && för att villkorligt inkludera JSX. Om vänsterledet är falskt renderas ingenting. Var uppmärksam på falska tal — 0 renderas som '0'.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Villkorsstyrd rendering med ternär operator
Använd den ternära operatorn för att rendera ett av två element baserat på ett villkor.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Villkorsstyrd rendering med if-sats
För komplexa villkor använder ni en if-sats före return. Returnera tidigt vid tillstånd som laddning eller fel.
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>
);
}Filtrera före mappning
Filtrera arrayen före mappningen för att bara rendera matchande objekt. Det blir tydligt och lättläst.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Tomt tillstånd
Hantera alltid fallet med en tom array. Att rendera en tom lista utan förklaring är förvirrande — visa i stället ett hjälpsamt meddelande för det tomma tillståndet.
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>
);Rendera listor via portaler
Långa listor som behöver visas i en annan DOM-nod (till exempel en rullgardinsmeny) kan använda ReactDOM.createPortal. Men den mesta list-renderingen är enkel och sker i trädet.
Virtualiserade listor för bättre prestanda
För mycket långa listor (1 000+ objekt) bör du använda ett virtualiseringsbibliotek som react-window eller @tanstack/react-virtual. De renderar bara synliga rader och undviker prestandaproblem i DOM:en.
Snabbkontroll
När är det acceptabelt att använda arrayindex som en key i React-listor?
Sammanfattning: listor och villkorsstyrd rendering
Rendera listor med .map(). Lägg alltid till stabila, unika key-props. && för valfria element (se upp med 0). Ternär operator för antingen/eller. Tidiga returer för laddnings- och feltillstånd. Filtrera före mappning för villkorsstyrda listor. Visa ett meddelande om att listan är tom för tomma arrayer. Virtualisera mycket långa listor.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Listor, keys och villkorsstyrd rendering” gratis?
Ja – hela texten till ”Listor, keys och villkorsstyrd rendering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Listor, keys och villkorsstyrd rendering”?
Rendera arrayer med element med .map(), ange stabila key-props och rendera villkorsstyrt med && och ternary-operatorn. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Listor, keys och villkorsstyrd rendering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- JSX: syntax och transpilering
- Funktionella komponenter och props
- useState Hook: state och omrenderingar
- Listor, keys och villkorsstyrd rendering