Conditional & List Rendering

Showing different UI based on data - if/else patterns in JSX, rendering arrays with .map(), and the key prop explained properly.

What it is, in plain English: Conditional rendering means showing different JSX depending on a condition — done with regular JavaScript (ternaries, &&, early returns), not special React syntax. List rendering means turning an array of data into an array of JSX elements, almost always done with Array.map(). Every element in a rendered list needs a unique, stable key prop so React can correctly track each item across re-renders.

Showing different content based on data

React has no special "if" syntax inside JSX — you use regular JavaScript. The three most common patterns: early return, ternary, and the && operator.

Early return — for completely different UI

function Greeting({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <p>Please log in.</p>;   // returns early, stops here
  }

  return <p>Welcome back!</p>;
}

Ternary — for inline either/or

function StatusIcon({ isOnline }) {
  return (
    <span>
      {isOnline ? "🟢 Online" : "⚫ Offline"}
    </span>
  );
}

&& — for show-or-nothing

function Notification({ message }) {
  return (
    <div>
      {message && <div className="alert">{message}</div>}
      {/* if message is falsy (empty string, null), nothing renders */}
    </div>
  );
}

Rendering a list of items

function FruitList() {
  const fruits = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
// .map() transforms each array item into a JSX element
// The result (an array of <li> elements) is placed directly in the JSX

The key prop — required for lists

// Always give list items a unique, STABLE key:
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>   {/* use a real unique id, not array index */}
  ))}
</ul>

// Why? React uses 'key' to match list items across re-renders.
// Without a stable key, React can confuse which item is which when
// the list is reordered, filtered, or items are added/removed.

Try It Yourself (JSX)

// Conditional and list rendering -- both use plain JavaScript, not special syntax

function StatusMessage({ status }) {
  if (status === "loading") return <p>Loading...</p>;
  if (status === "error")   return <p style={{color: "red"}}>Something went wrong</p>;

return <p>Data loaded successfully!</p>;
}

function UserBadge({ user }) {
  return (
    <span>
      {user ? `Welcome, ${user.name}` : "Please log in"}
    </span>
  );
}

function Cart({ itemCount }) {
  return (
    <div>
      {itemCount > 0 && <p>{itemCount} items in cart</p>}
      {itemCount === 0 && <p>Your cart is empty</p>}
    </div>
  );
}

function FruitList() {
  const fruits = [
    { id: 1, name: "Apple", emoji: "🍎" },
    { id: 2, name: "Banana", emoji: "🍌" },
    { id: 3, name: "Cherry", emoji: "🍒" },
  ];

return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit.id}>
          {fruit.emoji} {fruit.name}
        </li>
      ))}
    </ul>
  );
}

function TodoList({ todos }) {
  const activeTodos = todos.filter(t => !t.done);

if (activeTodos.length === 0) {
    return <p>All done! 🎉</p>;
  }

return (
    <ul>
      {activeTodos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

function App() {
  const sampleTodos = [
    { id: 1, text: "Learn React", done: true },
    { id: 2, text: "Build a project", done: false },
    { id: 3, text: "Deploy it", done: false },
  ];
  return (
    <div>
      <StatusMessage status="success" />
      <UserBadge user={{ name: "Alice" }} />
      <Cart itemCount={3} />
      <FruitList />
      <TodoList todos={sampleTodos} />
    </div>
  );
}

The 0 trap, index keys, and empty states

The number-zero rendering trap

function Cart({ items }) {
  return (
    <div>
      {items.length && <CartSummary items={items} />}
      {/* BUG: if items.length is 0, JSX renders the literal "0" on screen! */}
      {/* (0 is falsy, but React DOES render falsy numbers — just not false/null/undefined) */}
    </div>
  );
}

function CartFixed({ items }) {
  return (
    <div>
      {items.length > 0 && <CartSummary items={items} />}
      {/* comparison produces a real boolean — safe */}
    </div>
  );
}

When index-as-key is OK (and when it's not)

// Using array index as key is OK ONLY if the list:
// - never reorders
// - never has items inserted/removed from the middle
// - items have no internal state (no inputs, no checkboxes)

// Safe (static list, never changes):
const days = ["Mon","Tue","Wed","Thu","Fri"];
days.map((day, i) => <li key={i}>{day}</li>);  // fine — never reorders

// UNSAFE (dynamic list with reordering/filtering/insertion):
function TodoListBuggy({ todos }) {
  return todos.map((todo, i) =>
    <TodoItem key={i} todo={todo} />   // ✗ if todos is filtered/sorted, items mix up state
  );
}
function TodoListFixed({ todos }) {
  return todos.map(todo =>
    <TodoItem key={todo.id} todo={todo} />   // ✓ stable identity regardless of order
  );
}

Empty states and loading states — the full pattern

function ProductList({ products, isLoading, error }) {
  if (isLoading) return <Spinner />;
  if (error)     return <ErrorMessage error={error} />;
  if (products.length === 0) return <p>No products found.</p>;

  return (
    <ul>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </ul>
  );
}
// This 4-state pattern (loading / error / empty / data) covers almost every list UI

switch-like rendering for many cases

function StatusBadge({ status }) {
  const labels = {
    pending:  { text: "Pending",  color: "orange" },
    active:   { text: "Active",   color: "green"  },
    cancelled:{ text: "Cancelled",color: "red"    },
  };
  const { text, color } = labels[status] ?? { text: "Unknown", color: "gray" };
  return <span style={{ color }}>{text}</span>;
  // an object lookup often reads cleaner than a switch statement in JSX
}

Reconciliation, key stability, and React.Children

// How key affects reconciliation precisely:
// React's diff algorithm matches elements by (type + key) at each level.
// Same type + same key at the same position → React UPDATES the existing instance
// (preserving its internal state, DOM node, and any effects).
// Different key → React UNMOUNTS the old instance and MOUNTS a new one from scratch.

// This is sometimes used DELIBERATELY to force a remount:
function VideoPlayer({ src }) {
  // Changing 'key' forces React to fully recreate the component when src changes,
  // rather than trying to update the existing <video> element:
  return <video key={src} src={src} controls />;
}

// React.Children utilities — for working with the children prop as data:
function Tabs({ children }) {
  const tabs = React.Children.toArray(children);  // normalises children to a flat array with keys
  return <div>{tabs[0]}</div>;  // e.g. only render the first tab's content
}

Why mapping inline is preferred over storing JSX arrays

React elements are plain objects — you technically could store an array of JSX in a variable and reuse it. But mapping directly inside JSX ({items.map(...)}) keeps the relationship between data and UI explicit and is what the React team recommends, since it avoids subtle staleness bugs where a memoised array of elements doesn't reflect a state change.

Official Sources

The Codex links only to official documentation. No third-party tutorials.