Chapter 9: Conditional Rendering & Lists

1. The Five Patterns of Conditional Rendering

Unlike frameworks that invent custom template syntax (like *ngIf or v-if), React relies entirely on standard JavaScript logic.

Pattern A: Early Return (Cleanest for Guard Clauses)

Ideal when handling loading states or permission errors before reaching the main layout:

function UserProfile({ user, isLoading, error }) {
  if (isLoading) {
    return <div className="spinner">Loading user profile...</div>;
  }

  if (error) {
    return <div className="alert-danger">Failed to load: {error.message}</div>;
  }

  if (!user) {
    return null; // Renders nothing to the DOM
  }

  // Happy-path UI renders cleanly without nested checks
  return (
    <article className="profile">
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </article>
  );
}

Pattern B: The Ternary Operator (`condition ? a : b`)

Used directly inside JSX when you need to toggle between two mutually exclusive views:

function AuthStatus({ isLoggedIn, user, onLogin, onLogout }) {
  return (
    <nav className="auth-bar">
      {isLoggedIn ? (
        <div>
          <span>Welcome, {user.name}!</span>
          <button onClick={onLogout}>Log Out</button>
        </div>
      ) : (
        <button onClick={onLogin}>Log In</button>
      )}
    </nav>
  );
}

Pattern C: Logical AND (`&&`) & The Dreaded '0' Bug

When you want to render an element only when a condition is true, and render nothing when false:

function NotificationBadge({ unreadMessages }) {
  return (
    <div className="inbox">
      <span>Inbox</span>
      {/* ⚠️ GOTCHA: If unreadMessages is 0, this renders: 0 on your screen! */}
      {/* {unreadMessages && <span className="badge">{unreadMessages}</span>} */}

      {/* ✅ CORRECT: Explicit boolean evaluation prevents rendering 0 */}
      {unreadMessages > 0 && <span className="badge">{unreadMessages}</span>}
    </div>
  );
}

2. Rendering Dynamic Lists with `Array.prototype.map()`

To render repeated data collections (such as search results, comments, or product lists), use JavaScript's native map() method to transform raw data arrays into arrays of JSX elements:

const products = [
  { id: "p1", name: "Wireless Headphones", price: 99.99 },
  { id: "p2", name: "Mechanical Keyboard", price: 149.50 },
  { id: "p3", name: "Ergonomic Mouse", price: 49.00 }
];

function ProductCatalog() {
  return (
    <section className="catalog">
      <h2>Featured Products</h2>
      <ul className="product-list">
        {products.map(item => (
          <li key={item.id} className="catalog-item">
            <span className="item-name">{item.name}</span>
            <span className="item-price">${item.price.toFixed(2)}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

3. Why the `key` Prop Matters for Reconciliation

Keys serve as persistent identities that inform React which items in an array have changed, been added, or been removed. Without keys, if you insert an item at the beginning of an array of 1,000 items, React would destructively re-render and mutate all 1,000 DOM nodes!

Rules for Proper Keys:

• Keys Must Be Unique Among Siblings: Different lists may use the same keys, but items within the same parent array must have unique keys.
• Keys Must Be Stable: Never generate keys on the fly during render (e.g., key={Math.random()}). A newly generated key forces React to completely destroy and re-create the DOM node on every single render, causing severe performance degradation and loss of input focus!
• Use Natural Database IDs: Use persistent primary keys from your backend database (e.g., item.id or item.uuid).

Frequently Asked Questions (FAQ)