Conditional Rendering

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).

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.

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.

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.

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.

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.

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.

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.

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...