REACT / LESSON 04

Conditional Rendering.

Learn how to show, hide, and switch between different UI elements based on conditions in React

Written by Andrew Lee JenkinsPublished Oct 5, 202612 min readFree lesson

Your app has to show different things in different situations. A loading spinner while data is fetching. An error message when something breaks. A welcome screen for brand new users and a dashboard for the ones who are logged in. That's conditional rendering, which just means showing different UI depending on what's true right now.

The Ternary Operator: Either This or That

The most common pattern is picking one of two things to show. For that you use a ternary operator (condition ? a : b).

Example

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
    </div>
  );
}

When isLoggedIn is true, the user sees "Welcome back!" and when it isn't, they see "Please sign in." A ternary ALWAYS renders something, because it always picks one of its two branches.

Short-Circuit (&&): Show or Nothing

Sometimes you want to show something or nothing at all. The && operator is perfect for that.

Example

function Notification({ message, hasUnread }) {
  return (
    <div>
      <h1>Your Inbox</h1>
      {hasUnread && <span className="badge">New messages!</span>}
    </div>
  );
}

If hasUnread is true, the badge shows up. If it's false, nothing renders. Nice and clean.

Early Returns

When the conditions get more complicated, you can just return early from your component function.

Example

function UserProfile({ user, loading, error }) {
  if (loading) {
    return <p>Loading profile...</p>;
  }

  if (error) {
    return <p className="error">Something went wrong: {error}</p>;
  }

  if (!user) {
    return <p>No user found.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Early returns keep your main render logic tidy. Every weird case gets handled and returned up top, before you ever reach the "happy path" at the bottom.

Storing JSX in Variables

You can also stash JSX in a variable and render it later. That comes in handy when the logic for deciding what to show gets a lil hairy.

Example

function StatusMessage({ status }) {
  let message;

  if (status === 'success') {
    message = <p className="text-green">Saved successfully!</p>;
  } else if (status === 'error') {
    message = <p className="text-red">Failed to save.</p>;
  } else if (status === 'loading') {
    message = <p className="text-gray">Saving...</p>;
  }

  return (
    <div>
      <h2>Form Status</h2>
      {message}
    </div>
  );
}

Rendering Lists with map()

Showing or hiding one element is only half the story. A lot of the time you'll need to render a whole list of items, and the map() array method is how you turn data into JSX.

Example

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Each call to map() turns one array (of data) into another array (of JSX elements). Then React renders everything in that returned array.

Keys: Helping React Track Items

When you render a list, every item needs a unique key prop. Keys tell React which item is which, so it can update the list efficiently when items get added, removed or shuffled around.

Example

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

Combining Lists with Conditions

You can filter a list before you map it, or tuck conditions right inside your map.

Example

function TaskList({ tasks }) {
  const incompleteTasks = tasks.filter(task => !task.completed);

  return (
    <div>
      <h2>To Do ({incompleteTasks.length})</h2>
      {incompleteTasks.length === 0 ? (
        <p>All done! Nothing left to do.</p>
      ) : (
        <ul>
          {incompleteTasks.map(task => (
            <li key={task.id}>
              {task.title}
              {task.priority === 'high' && <span className="badge">Urgent</span>}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

That example filters the tasks, shows a message if nothing's left, renders whatever IS left, and slaps an "Urgent" badge on the high-priority ones. Every pattern from this lesson, working together in one component.

Conditional CSS Classes

You can also switch CSS classes on and off to change how things look.

Example

function Button({ isActive, label }) {
  return (
    <button className={isActive ? 'btn-active' : 'btn-default'}>
      {label}
    </button>
  );
}

That's the exact pattern behind tabs, navigation items and toggle buttons that highlight whichever one is active.

TL;DR

Use the ternary operator (? :) to pick between two elements
Use short-circuit (&&) to show something or nothing
Use early returns to handle loading, errors and edge cases cleanly
Use map() to turn arrays of data into lists of elements
Always give list items a unique, stable key prop
Mix conditions and lists together for complex, dynamic UIs

What's Next?

Your components can show different things based on conditions now. But how do people actually interact with your app? Next lesson is event handling, which covers responding to clicks, typing, form submissions and more...

Loading the lesson…

Loading activities…