Conditional Rendering

Since JSX is just JavaScript, showing different markup based on a condition doesn't need any special React syntax — regular JavaScript expressions handle it.

The ternary operator: either/or

function Greeting({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome back!" : "Please log in."}
    </p>
  );
}

With isLoggedIn={true}:  "Welcome back!"
With isLoggedIn={false}: "Please log in."

The && operator: render only if true

When there's nothing to show in the "false" case, && is more concise than a ternary with an empty branch:

function Inbox({ unreadCount }) {
  return (
    <div>
      <h2>Inbox</h2>
      {unreadCount > 0 && <span className="badge">{unreadCount} new</span>}
    </div>
  );
}

With unreadCount={3}: an "Inbox" heading followed by
a badge reading "3 new".
With unreadCount={0}: just the "Inbox" heading, no badge.

unreadCount > 0 && <span>...</span> works because && evaluates its right side only when the left side is truthy — and React renders nothing at all when a piece of JSX evaluates to false.

Early return for a whole different view

When an entire component looks completely different depending on a condition, returning early is often clearer than nesting a ternary around all the markup:

function Page({ isLoading, data }) {
  if (isLoading) {
    return <p>Loading&hellip;</p>;
  }

  return <h1>{data.title}</h1>;
}

With isLoading={true}: "Loading…"
With isLoading={false} and data={{title: "Hi"}}: an h1
reading "Hi"