Conditional and List Rendering
By the end of this lesson, you'll be able to:
- Use if:true and if:false to conditionally render markup
- Use for:each and the iterator directive to render lists
- Supply correct, stable keys for repeated elements
Prerequisites: "Properties, Fields, and Getters"
Conditional Rendering with if:true / if:false
<template if:true={showWelcome}>
<p>Welcome back!</p>
</template>
<template if:false={showWelcome}>
<p>Please log in.</p>
</template>The inner <template> block only renders when the bound property evaluates truthy (if:true) or falsy (if:false).
Rendering Lists with for:each
<template for:each={cases} for:item="caseItem">
<p key={caseItem.id}>{caseItem.subject}</p>
</template>The key attribute is required and must be a genuinely unique, stable identifier for each item — usually a record ID, never an array index.
The iterator Directive
<template iterator:it={cases}>
<p key={it.value.id} class={it.first ? 'slds-text-title_bold' : ''}>
{it.value.subject}
</p>
</template>iterator:it gives you it.value (the item), plus it.first, it.last, and it.index — useful for styling the first or last item differently, or numbering rows.
Handling Empty Lists
<template if:true={cases.length}>
<template for:each={cases} for:item="caseItem">
<p key={caseItem.id}>{caseItem.subject}</p>
</template>
</template>
<template if:false={cases.length}>
<p>No recent cases.</p>
</template>Pairing for:each with a conditional empty-state check is an extremely common, genuinely necessary real-world pattern — an empty list should never just render nothing with no explanation.
Exercise
Write the for:each markup to render a list of "products" (each with an id and name property) as <p> elements.
Show hint
Don't forget the required key attribute.
Exercise
Challenge: a developer uses the array index as the key attribute for a for:each list. Explain, as a comment, why this can cause bugs when the list is later filtered or reordered.
Show hint
Think about what "stable" means for a key.
Conditional and List Rendering Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Conditional and list rendering directives are what turn a static template into one that reflects real, changing data — and a stable key is the one detail that makes list rendering reliable rather than glitchy.