React Conditionals

React Conditionals: Ternary, Logical AND, & Guard Clauses

Conditional rendering in React allows components to display different markup depending on current state, props, or permissions.

Primary Conditional Techniques

1. Guard Clauses (Early Return): Return null or placeholder elements before rendering main markup.
2. Ternary Operator (condition ? true : false): Choose between two alternative UI branches inside JSX.
3. Logical AND Operator (condition && <Element />): Render an element only when a condition is met.

flowchart TD
    State["Component State"] --> Check{"User Authenticated?"}
    Check -- Yes --> Dashboard["Render <UserDashboard />"]
    Check -- No --> Login["Render <LoginForm />"]

Practical Code Examples

import React, { useState } from 'react';

function LoadingSpinner() {
  return <div className="spinner">Loading data...</div>;
}

export default function AccountOverview({ isLoading, user, unreadCount }) {
  // 1. Guard Clause: Early Return while loading
  if (isLoading) {
    return <LoadingSpinner />;
  }

  // 2. Guard Clause: Handle null data state
  if (!user) {
    return <div className="error">No user session found. Please log in.</div>;
  }

  return (
    <div className="account-card">
      <h2>Welcome, {user.name}</h2>

      {/* 3. Ternary Operator for Status Badge */}
      <span className={user.isPremium ? 'badge-gold' : 'badge-silver'}>
        {user.isPremium ? 'Premium Account' : 'Free Tier'}
      </span>

      {/* 4. Logical AND Operator for Optional Notifications */}
      {unreadCount > 0 && (
        <div className="notification-pill">
          You have {unreadCount} unread messages.
        </div>
      )}
    </div>
  );
}

Best Practices & Gotchas

• Beware of the Zero Trap with &&: In JavaScript, 0 && <Component /> evaluates to 0, rendering a literal 0 on the screen! To prevent this, convert numbers to explicit booleans: unreadCount > 0 && <Component /> or Boolean(unreadCount) && <Component />.
• Keep JSX Clean: Avoid nesting ternary operators three levels deep inside JSX. Refactor complex conditional branches into helper functions or variables above the return statement.

Self-Check Challenge

Refactor a component that displays "Admin View" if role === 'admin', "Editor View" if role === 'editor', and "Guest View" for all others using a clean JavaScript switch statement or lookup dictionary.