HomeAll ToolsCoursesBlogAbout
Beginner⏱️ 8 min📘 Topic 5 of 13

🔀 Conditional Rendering and Lists in React — Patterns That Scale

Master conditional rendering and list rendering in React. Ternary, &&, early return, map() with stable keys, and the bugs caused by using array index as key.

Two everyday patterns: showing different UI based on a condition, and rendering an array as a list of elements.

🔀 Conditional rendering — 4 ways

// 1. if + early return
if (!user) return <Spinner />;

// 2. ternary
{isLoggedIn ? <Dashboard /> : <Login />}

// 3. && short-circuit
{hasError && <Banner />}

// 4. function returning JSX
function render() { ... }

⚠️ The 0 trap

{items.length && <List />} — if length is 0, React renders the literal 0, not nothing! Use {items.length > 0 && ...}.

📋 Rendering lists

{users.map(u => (
  <li key={u.id}>{u.name}</li>
))}

🔑 The key prop — why it matters

  • React uses keys to identify list items across renders.
  • Stable keys = correct reuse + preserved state.
  • Using index as key is fine ONLY if the list is static and never reordered.
  • Bad keys cause: wrong inputs, lost focus, animation glitches, performance issues.

💡 Tip: Prefer a stable unique id from your data (DB id, slug, UUID).

💻 Code Examples

Stable keys vs index

// ✅ Good — stable id
{users.map(u => <Row key={u.id} user={u} />)}

// ⚠️ Risky if list is reorderable
{users.map((u, i) => <Row key={i} user={u} />)}
Output:
Reordering with index keys re-uses the wrong DOM nodes — inputs can show the old user's text.

Avoiding the 0-render bug

// ❌ shows 0 when empty
{cart.length && <CartSummary items={cart} />}

// ✅ safe
{cart.length > 0 && <CartSummary items={cart} />}

// ✅ even safer
{cart.length ? <CartSummary items={cart} /> : null}
Output:
Empty cart now hides cleanly.

⚠️ Common Mistakes

  • Using array `index` as key for lists that can reorder, filter or insert.
  • `{value && <X />}` printing 0 or '' when value is falsy-but-not-boolean.
  • Deeply nested ternaries — unreadable; extract a function or use early returns.
  • Returning different element types in different branches that break component state.

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.Why does React need a key prop on list items?Beginner
React uses keys to match elements between renders so it can reuse, reorder, or remove DOM nodes correctly. Without stable keys, React falls back to index matching and may apply changes to the wrong element.
Q2.When is it safe to use array index as key?Intermediate
Only for static lists that never reorder, filter, insert in the middle, or change length. Otherwise, React may keep the wrong state (inputs show wrong values, animations glitch).
Q3.What's the difference between conditional rendering with && vs ternary?Intermediate
&& renders the right side when the left is truthy, otherwise its left value (which renders if it's a number like 0). Ternary returns one of two branches explicitly. Use ternary when you have a falsy-but-renderable left side, or when both branches render JSX.
Q4.How do you render a list of items in React?Beginner
Use Array.map to transform data into JSX, with a stable `key` prop on each top-level element: `items.map(it => <Row key={it.id} item={it} />)`.
Q5.What's the danger of `{count && <Component />}` when count is 0?Advanced
0 is falsy in JS, but `0` is also a valid React child — it renders the literal text '0' in the DOM. Convert explicitly: `count > 0 && ...` or `Boolean(count) && ...`.

🧠 Quick Summary

  • Conditional render: if-return, ternary, &&, or function.
  • Beware the 0-render trap with && and numbers.
  • Always use `key` on array items.
  • Index as key only for static lists.
  • Stable, unique data ids are the safest keys.