React Conditional Rendering

In the last lesson you learned about React Preventing Default Behavior. This lesson is about conditional rendering, where your app shows different things at different times, like “Welcome back” when a user is logged in and “Please log in” when they are not.

🤔 Why do we need conditional rendering?

Real apps never show the same screen to everyone. The screen changes based on what is happening.

• Think about YouTube. If you are logged in, you see your profile picture. If not, you see a “Sign in” button.
• Or Amazon. Your cart shows “3 items” when it has things, and “Your cart is empty” when it does not.
• So the UI has to make a choice. Show this when a condition is true, show that when it is false.
• That choice based on a condition is exactly what conditional rendering means.

🧠 What is conditional rendering?

Conditional rendering means showing different UI based on a condition. The condition is usually a piece of data, like “is the user logged in”.

• You check a condition, like isLoggedIn.
• If it is true, you render one piece of UI.
• If it is false, you render a different one.
• React puts whichever one you chose onto the screen.

A simple way to picture it is a light switch. The switch position is your condition, so up shows one thing and down shows another.

🚫 You cannot put a raw if inside JSX

Here is the trap almost everyone hits first. You try to write a normal if statement right inside the JSX braces, and React refuses.

• The curly braces inside JSX only accept an expression, which is something that produces a value, like count + 1 or a string.
• An if statement is not an expression. It does not produce a value, it just runs code, so it cannot live inside the braces.
• This confuses a lot of people coming from plain JavaScript, where you put if anywhere you like.
• The fix is simple. You do the if work above the return, not inside the JSX.

Here is the wrong way next to the right way, so the difference is clear.

// ❌ Wrong - a raw if inside JSX braces does not work
function Greeting({ isLoggedIn }) {
  return (
    <div>
      { if (isLoggedIn) { <p>Welcome back</p> } } {/* syntax error */}
    </div>
  );
}

// ✅ Right - do the if above the return, store the result, then render it
function Greeting({ isLoggedIn }) {
  let content;
  if (isLoggedIn) {
    content = <p>Welcome back</p>;
  } else {
    content = <p>Please log in</p>;
  }

  return <div>{content}</div>;
}

So the rule to remember is this. Decide what to show in the function body using if, save it in a variable, then drop that variable into the JSX.

📦 The if/else into a variable pattern

This is the most common pattern, so let’s slow down on it. Here is how it works.

• Make an empty variable, like let content.
• Run your if/else and set content to one piece of JSX or the other.
• In the return, just write {content}. That is an expression, so JSX is happy.

Here is a small component that greets a user by name when logged in, and asks them to log in otherwise.

function Greeting({ isLoggedIn, name }) {
  let content;

  if (isLoggedIn) {
    content = <h2>Welcome back, {name}!</h2>;
  } else {
    content = <h2>Please log in to continue.</h2>;
  }

  return <div className="greeting">{content}</div>;
}

So if Alex is logged in, she sees “Welcome back, Alex!”. If not, she sees “Please log in to continue.” All the deciding happens above the return, and the JSX stays clean with just the content variable.

🔀 The early return pattern

There is another neat way to do this, and sometimes it reads even cleaner. You return early for one case, then return the other case below.

• Check the condition at the top of the function.
• If it matches, return the JSX for that case right there, and the function stops.
• If it did not match, the code keeps going and hits the second return below.
• So each case gets its own simple return, with no shared variable.

Here is the same greeting written with an early return instead of a variable.

function Greeting({ isLoggedIn, name }) {
  if (!isLoggedIn) {
    return <h2>Please log in to continue.</h2>;
  }

  return <h2>Welcome back, {name}!</h2>;
}

So when isLoggedIn is false, the first return runs and the function is done. When it is true, that first block is skipped and the second return runs. The early return is great when one case is a quick exit, like a “not logged in” or “still loading” screen.

⚡ Ternary and && are coming next

The if patterns are perfect when the logic is a few lines. But sometimes you just want a tiny choice right inside the JSX, and writing a whole if above feels heavy.

• For a quick inline choice, React people use the ternary operator, which is an expression, so it can sit inside JSX braces.
• For “show this only when true, otherwise show nothing”, they use the && operator.
• Both are just shorter tools for the same job of conditional rendering.
• You will learn each of them in the next lessons. For now, just know if above the return is the foundation everything else builds on.

🧩 What You’ve Learned

• ✅ Conditional rendering means showing different UI based on a condition, like logged in or not
• ✅ You cannot put a raw if statement inside JSX braces, because braces only accept an expression
• ✅ The fix is to do the if above the return, store the result in a variable, then render that variable
• ✅ The early return pattern returns one piece of JSX for one case and another below for the other
• ✅ Use the variable pattern for a bigger layout, and the early return for a quick exit case
• ✅ The ternary and && operators are shorter inline tools for conditional rendering, coming up next

🚀 What’s Next?

Now you can choose what to render with if, a variable, or an early return. Next you’ll learn the ternary operator, a compact way to make that same choice right inside your JSX.

React Ternary Operator