Frontend Engineering | VoidX Academy

25. Conditional Rendering

Displaying UI Based on Logic

Your applications will rarely look the same at all times. If a user is logged in, you show a Dashboard. If they aren't, you show a Login button. If data is fetching, you show a spinner. Conditional Rendering is how React decides what JSX to display based on the current state.

Method 1: Early Returns (if/else)

Because React components are just JavaScript functions, you can use standard if statements to return completely different UI before the rest of the component executes.

export default function UserProfile({ user, isLoading }) {
  // If it's loading, return early. The rest of the function is skipped.
  if (isLoading) {
    return <div className="spinner">Loading data...</div>;
  }

  // If there is no user, return an error message.
  if (!user) {
    return <div>Error: User not found.</div>;
  }

  // If we pass the checks above, render the normal UI
  return <h1>Welcome, {user.name}!</h1>;
}

Method 2: Ternary Operator (? :)

If you want to conditionally render elements inside a block of JSX, you cannot use an if statement (because JSX requires expressions). Instead, use the JavaScript ternary operator.

export default function Header({ isLoggedIn }) {
  return (
    <header>
      <h1>My App</h1>
      {/* Syntax: condition ? true_UI : false_UI */}
      {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
    </header>
  );
}

Method 3: Logical AND (&&)

Sometimes you only want to render something if a condition is true, and render nothing if it is false. The && operator is perfect for this.

export default function Notification({ message }) {
  return (
    <div>
      <h2>Dashboard</h2>
      {/* If 'message' exists (is truthy), the div renders. Otherwise, it renders nothing. */}
      {message && <div className="alert">{message}</div>}
    </div>
  );
}

Warning: Be careful with the number 0. In JavaScript, 0 is falsy. If you write {messages.length && <p>New messages!</p>}, and the length is 0, React will literally render a "0" on the screen. Always use strict booleans: {messages.length > 0 && ...}.

25. Conditional Rendering

Displaying UI Based on Logic

Method 1: Early Returns (if/else)

Because React components are just JavaScript functions, you can use standard if statements to return completely different UI before the rest of the component executes.

export default function UserProfile({ user, isLoading }) {
  // If it's loading, return early. The rest of the function is skipped.
  if (isLoading) {
    return <div className="spinner">Loading data...</div>;
  }

  // If there is no user, return an error message.
  if (!user) {
    return <div>Error: User not found.</div>;
  }

  // If we pass the checks above, render the normal UI
  return <h1>Welcome, {user.name}!</h1>;
}

Method 2: Ternary Operator (? :)

If you want to conditionally render elements inside a block of JSX, you cannot use an if statement (because JSX requires expressions). Instead, use the JavaScript ternary operator.

export default function Header({ isLoggedIn }) {
  return (
    <header>
      <h1>My App</h1>
      {/* Syntax: condition ? true_UI : false_UI */}
      {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
    </header>
  );
}

Method 3: Logical AND (&&)

Sometimes you only want to render something if a condition is true, and render nothing if it is false. The && operator is perfect for this.

export default function Notification({ message }) {
  return (
    <div>
      <h2>Dashboard</h2>
      {/* If 'message' exists (is truthy), the div renders. Otherwise, it renders nothing. */}
      {message && <div className="alert">{message}</div>}
    </div>
  );
}

25. Conditional Rendering

Displaying UI Based on Logic

Method 1: Early Returns (if/else)

Method 2: Ternary Operator (? :)

Method 3: Logical AND (&&)

Knowledge Check

25. Conditional Rendering

Displaying UI Based on Logic

Method 1: Early Returns (if/else)

Method 2: Ternary Operator (? :)

Method 3: Logical AND (&&)

Knowledge Check