Lists & Keys; Conditional Rendering
Render arrays with map(), choose stable keys, handle empty/loading states, and apply common conditional patterns.
Lists & Keys; Conditional Rendering is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Overview
Goal: Render arrays safely and clearly with keys, and use simple conditional patterns for empty/loading UI.
map() to render arrays
Use array.map() to turn data into elements; each direct child in a list needs a key prop for stable reconciliation.
Demo: list + keys
Prefer stable ids from your data as key; avoid using array indexes unless the list is static.
<div id="root"></div>
Conditional rendering basics
Conditionals:
- Empty state: show a friendly message when list is empty.
- Loading: show a spinner/skeleton.
- Render choices: cond ? A : B or cond && A.
Demo: loading/empty UI
Handle loading and empty cases explicitly to avoid blank screens.
<div id="root"></div>
Keys & conditionals tips
Tips:
- Use stable ids as keys; avoid indexes for dynamic lists.
- Place the key on the outermost mapped element.
- Keep conditionals small and readable.
Keys best practice
Recap
Recap: Map arrays to elements with stable keys, and handle loading/empty states using simple conditional patterns.
Frequently asked questions
Is the “Lists & Keys; Conditional Rendering” lesson free?
Yes — the full text of “Lists & Keys; Conditional Rendering” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Lists & Keys; Conditional Rendering”?
Render arrays with map(), choose stable keys, handle empty/loading states, and apply common conditional patterns. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Lists & Keys; Conditional Rendering” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- JSX Rules: Expressions, Attributes, Fragments
- Lists & Keys; Conditional Rendering
- Styling Options: CSS Modules, Inline Styles, Class Helpers