Lijsten keys en conditioneel renderen
Render arrays met elementen met .map(), geef stabiele key-props mee en render elementen conditioneel met && en de ternary-operator.
Lijsten keys en conditioneel renderen is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Lijsten renderen met .map()
Render een dynamische lijst door .map() op een array aan te roepen en voor elk item JSX terug te geven. React rendert een array met elementen net als één element.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);De key-prop — waarom die belangrijk is
key is een speciale React-prop die React helpt bepalen welke items in een lijst zijn gewijzigd, toegevoegd of verwijderd. Zonder sleutels, of met instabiele sleutels zoals indexen, kan React onjuiste updates uitvoeren.
Goede en slechte sleutels
Goede sleutels: unieke, stabiele ID's uit je gegevens, bijvoorbeeld item.id. Slechte sleutels: array-indexen (items kunnen van volgorde veranderen) of willekeurige waarden (veranderen bij elke render).
// 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} />)}Objecten renderen
Map een array met objecten naar componenten en destructureer het object naar 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>
);Voorwaardelijk renderen met &&
Gebruik de kortsluitoperator && om JSX voorwaardelijk op te nemen. Als de linkerkant onwaar is, wordt er niets gerenderd. Let op met getallen die als onwaar gelden — 0 wordt als '0' gerenderd.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Voorwaardelijk renderen met een ternaire operator
Gebruik de ternaire operator om op basis van een voorwaarde een van twee elementen te renderen.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Voorwaardelijk renderen met een if-instructie
Gebruik voor complexe voorwaarden een if-instructie vóór de return. Geef bij laad- en foutstatussen vroegtijdig een waarde terug.
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>
);
}Filteren vóór het mappen
Filter de array voordat je haar mapt, zodat je alleen overeenkomende items rendert. Dit is overzichtelijk en goed leesbaar.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Lege toestand
Behandel altijd het geval van een lege array. Een lege lijst zonder melding renderen is verwarrend — toon in plaats daarvan een nuttige melding voor de lege toestand.
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>
);Portals voor lijsten renderen
Lange lijsten die in een ander DOM-knooppunt moeten verschijnen, zoals een vervolgkeuzemenu, kunnen ReactDOM.createPortal gebruiken. Maar de meeste lijsten worden gewoon binnen dezelfde boom gerenderd.
Gevirtualiseerde lijsten voor betere prestaties
Gebruik voor zeer lange lijsten (1.000+ elementen) een virtualisatiebibliotheek zoals react-window of @tanstack/react-virtual. Deze renderen alleen zichtbare rijen, zodat prestatieproblemen in de DOM worden voorkomen.
Korte controle
Wanneer is het in React-lijsten acceptabel om de array-index als key te gebruiken?
Samenvatting: lijsten en voorwaardelijk renderen
Render lijsten met .map(). Voeg altijd stabiele, unieke key-props toe. Gebruik && voor optionele elementen (let op 0). Gebruik een ternaire operator voor twee mogelijkheden. Gebruik vroegtijdige returns voor laad- en foutstatussen. Filter vóór het mappen voor voorwaardelijke lijsten. Toon een bericht voor de lege status bij lege arrays. Virtualiseer zeer lange lijsten.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Lijsten keys en conditioneel renderen” gratis?
Ja — de volledige tekst van “Lijsten keys en conditioneel renderen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Lijsten keys en conditioneel renderen”?
Render arrays met elementen met .map(), geef stabiele key-props mee en render elementen conditioneel met && en de ternary-operator. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Lijsten keys en conditioneel renderen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- JSX: syntaxis en transpilation
- Functionele componenten en props
- useState Hook: state en re-renders
- Lijsten keys en conditioneel renderen