Conditional Rendering

Your components often need to display different content based on conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ternary operators.

Conditionally Returning JSX

The simplest way to conditionally render is to return early:

function LoginMessage({ isLoggedIn, username }) {
  if (isLoggedIn) {
    return <h1>Welcome back, {username}!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

Returning Nothing

Return null to render nothing:

function ErrorMessage({ error }) {
  if (!error) {
    return null; // Don't render anything
  }

  return (
    <div className="error">
      <strong>Error:</strong> {error}
    </div>
  );
}

Important: Returning null, undefined, true, or false from a component renders nothing. However, these values behave differently inside JSX expressions.

Ternary Operator

Use the ternary operator (? :) for inline conditional rendering:

function UserStatus({ isOnline }) {
  return (
    <div>
      <span className={isOnline ? 'status-online' : 'status-offline'}>
        {isOnline ? '🟢 Online' : '🔴 Offline'}
      </span>
    </div>
  );
}

Nested Ternaries

function Badge({ count }) {
  return (
    <div className="badge">
      {count === 0 
        ? 'No notifications'
        : count === 1
        ? '1 notification'
        : `${count} notifications`
      }
    </div>
  );
}

Readability tip: Deeply nested ternaries can be hard to read. Consider using if statements or extracting logic into a function if you have more than 2 levels.

Logical AND Operator (&&)

Use && to render something only when a condition is true:

function Notifications({ messages }) {
  return (
    <div>
      <h1>Inbox</h1>
      {messages.length > 0 && (
        <p>You have {messages.length} unread messages.</p>
      )}
    </div>
  );
}

How && Works in JSX

function Example({ show, count }) {
  return (
    <div>
      {/* ✅ Correct - renders "Hello" or nothing */}
      {show && <p>Hello</p>}

      {/* ❌ Wrong - renders 0 when count is 0! */}
      {count && <p>{count} items</p>}

      {/* ✅ Correct - explicit boolean check */}
      {count > 0 && <p>{count} items</p>}
    </div>
  );
}

Gotcha: The left side of && is rendered if it’s a falsy number like 0. Always use boolean conditions:

✅ isReady && <Component />
✅ count > 0 && <Component />
❌ count && <Component /> (renders 0 when count is 0)

If/Else in JSX

You can’t use if/else directly in JSX, but you can use it before the return:

function Dashboard({ user }) {
  let content;
  
  if (user.role === 'admin') {
    content = <AdminPanel />;
  } else if (user.role === 'moderator') {
    content = <ModeratorPanel />;
  } else {
    content = <UserPanel />;
  }

  return (
    <div>
      <h1>Dashboard</h1>
      {content}
    </div>
  );
}

Using IIFE (Immediately Invoked Function Expression)

function StatusIcon({ status }) {
  return (
    <div>
      {(() => {
        switch (status) {
          case 'success':
            return <span>✅ Success</span>;
          case 'error':
            return <span>❌ Error</span>;
          case 'warning':
            return <span>⚠️ Warning</span>;
          default:
            return <span>ℹ️ Info</span>;
        }
      })()}
    </div>
  );
}

Multiple Conditions

Handle complex conditional logic with multiple conditions:

function MessageList({ messages, isLoading, error }) {
  if (error) {
    return <div className="error">Error: {error}</div>;
  }

  if (isLoading) {
    return <div className="loading">Loading messages...</div>;
  }

  if (messages.length === 0) {
    return <div className="empty">No messages yet.</div>;
  }

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

Conditional Attributes

Conditionally set element attributes:

function Button({ isPrimary, isDisabled, children }) {
  return (
    <button
      className={`btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}`}
      disabled={isDisabled}
      aria-disabled={isDisabled ? 'true' : 'false'}
    >
      {children}
    </button>
  );
}

Conditional Class Names

function Card({ isActive, isHighlighted, hasError }) {
  const classNames = [
    'card',
    isActive && 'card-active',
    isHighlighted && 'card-highlighted',
    hasError && 'card-error'
  ].filter(Boolean).join(' ');

  return <div className={classNames}>Card content</div>;
}

// Or using template literals
function Card({ isActive, isHighlighted }) {
  return (
    <div className={`
      card
      ${isActive ? 'card-active' : ''}
      ${isHighlighted ? 'card-highlighted' : ''}
    `.trim()}>
      Card content
    </div>
  );
}

Extracting Conditional Logic

For complex conditions, extract into helper functions:

function canUserEdit(user, post) {
  return user.id === post.authorId || user.role === 'admin';
}

function canUserDelete(user, post) {
  return user.role === 'admin' || 
         (user.id === post.authorId && post.createdAt > Date.now() - 3600000);
}

function PostActions({ user, post }) {
  return (
    <div className="actions">
      {canUserEdit(user, post) && (
        <button>Edit</button>
      )}
      {canUserDelete(user, post) && (
        <button>Delete</button>
      )}
    </div>
  );
}