React · Lesson 6 of 7
Lists, keys & conditional rendering
Rendering arrays with map, choosing keys, and showing things conditionally.
Render a list by mapping an array to JSX: {jobs.map(job => <li key={job.id}>{job.title}</li>)}.
Each item needs a key that is unique among its siblings and stable over time — usually an id from your data. Keys let React keep track of which item is which when the list changes. Avoid using the array index when items can be added, removed or reordered.
Conditional rendering
{cond ? <A /> : <B />}— choose between two things.{cond && <A />}— show something or nothing (careful:0 && …renders 0).- Return early:
if (!jobs.length) return <p>No jobs</p>;
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- map() turns data into elements.
- Keys: unique, stable ids — not indexes for changing lists.
- Ternary or && for conditional UI.
Quick check
What makes a good key?
Keys must stay the same between renders; random values change every time and indexes shift when items move.
Practice task
Add a search box that filters the list by title (case-insensitive) as well as by city.
Interview corner
Why are keys needed in lists?
They let React match items between renders so it can reuse, move or remove the right DOM nodes and keep each item's state.
What's the pitfall with {count && <Badge />}?
If count is 0, React renders the 0. Use {count > 0 && <Badge />} or a ternary.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.