Conditional Rendering

⚛️ ReactLesson 5Beginner

React components can render different UI based on conditions — like showing a login form vs. a dashboard. Since JSX is JavaScript, you can use all standard JS conditional patterns.

1 All Conditional Patterns

React — Conditional Rendering

function Dashboard({ user, isLoading, error }) {
  // 1. Early return
  if (isLoading) return <Spinner />;
  if (error)     return <ErrorMessage message={error} />;

  return (
    <div>
      {/* 2. Ternary */}
      {user ? <h1>Welcome, {user.name}!</h1> : <h1>Welcome, Guest!</h1>}

      {/* 3. Short-circuit (render only if true) */}
      {user?.isAdmin && <AdminPanel />}

      {/* 4. Nullish coalescing for fallback text */}
      <p>{user?.bio ?? "No bio provided."}</p>

      {/* 5. if/else via IIFE */}
      {(() => {
        if (user?.role === "admin")  return <span className="badge-red">Admin</span>;
        if (user?.role === "editor") return <span className="badge-blue">Editor</span>;
        return <span className="badge-gray">Viewer</span>;
      })()}
    </div>
  );
}

2 Loading & Empty States

React — Loading / Empty Patterns

function UserList({ users, isLoading }) {
  if (isLoading) {
    return (
      <div className="skeleton-list">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="skeleton-card" />
        ))}
      </div>
    );
  }

  if (users.length === 0) {
    return (
      <div className="empty-state">
        <span>👥</span>
        <p>No users found.</p>
      </div>
    );
  }

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

3 Code Challenge

Challenge: Build a Notification component that renders differently based on a type prop: "success" (green ✅), "warning" (yellow ⚠️), "error" (red ❌), and "info" (blue ℹ️).