JSX Conditional Rendering

In the last lesson you learned about JSX Comments. Now let’s make the JSX itself smarter, because a real screen doesn’t always show the same thing. Choosing what to show right inside your JSX is what we call conditional rendering.

🤔 Why Conditional Rendering?

Think about almost any app you open. WhatsApp shows your chat list when you are signed in. It shows a login screen when you are not. Same component, two different views.

So here is the pain:

• You have one piece of data, like “is this person signed in?”. You need the screen to react to it.
• You can’t write a normal if statement right inside JSX. See, JSX is made of expressions, not statements.
• An expression is a bit of code that produces a value, like 2 + 2 or name. An if does not produce a value, so it does not fit.

Conditional rendering is the fix. It lets you pick what to show based on a true or false value, right where you write your JSX.

We will use one running example through this whole lesson: a small isLoggedIn flag.

🧩 The Ternary Operator

The most common way to choose between two things in JSX is the ternary operator:

• It is the only if/else style choice that fits inside JSX braces.
• That works because it produces a value, and JSX is happy to render a value.

Here is the shape of it.

condition ? valueIfTrue : valueIfFalse

You read it like a question. Is the condition true? If yes, use the first value. If no, use the second value.

Now let’s use it to show a greeting based on whether someone is signed in.

function Greeting() {
  const isLoggedIn = true;

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

Let’s walk through it line by line.

• const isLoggedIn = true is our flag. Right now it is true.
• The braces { } let us drop a JavaScript expression into JSX.
• Inside the braces, the ternary asks: is isLoggedIn true?
• Because it is true, React renders the first part, the <h1>Welcome back, Riya!</h1>.

So with isLoggedIn set to true, the person sees this.

Welcome back, Riya!

Now flip the flag. Change const isLoggedIn = true to const isLoggedIn = false. React picks the part after the colon instead.

Please sign in.

The why is simple. A ternary always gives back one value, either the left side or the right side. JSX renders that single value.

🧩 The Logical AND Pattern

Sometimes you don’t want a choice between two things. You just want to show something when a condition is true, and show nothing when it is false. There is no “else” you care about.

For that we use the logical AND operator, &&.

function Inbox() {
  const isLoggedIn = true;

  return (
    <div>
      <h1>Inbox</h1>
      {isLoggedIn && <p>You have 3 new messages.</p>}
    </div>
  );
}

Here is what happens.

• isLoggedIn && <p>...</p> reads as “if the left side is true, give me the right side”.
• When isLoggedIn is true, the whole expression becomes the <p> element, so React shows the message.
• When isLoggedIn is false, the expression becomes false, and React simply renders nothing there.

With the flag true, the person sees both lines.

Inbox
You have 3 new messages.

With the flag false, only the heading stays. The message disappears.

Logical AND is your go-to when there is a thing to show or just nothing.

🧩 Storing JSX in a Variable

When the choice gets a little bigger, packing it all inside the return can get hard to read. The good news:

• JSX is just a value, so you can put it in a variable first.
• You decide what the variable holds. Then you drop that variable into the return.

function Dashboard() {
  const isLoggedIn = false;

  let content;
  if (isLoggedIn) {
    content = <h1>Welcome back, Alex!</h1>;
  } else {
    content = <h1>Please sign in to continue.</h1>;
  }

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

Let’s read it.

• We declare let content with nothing in it yet.
• A normal if/else runs before the return. So here you can use a full statement, not just an expression.
• Each branch puts some JSX into content.
• The return is now clean. It just drops content into the page.

Here isLoggedIn is false, so the else branch runs and the person sees this.

Please sign in to continue.

This is the same result as a ternary. But it shines when each branch has several lines. Your return stays short and easy to scan.

🧩 Returning null to Show Nothing

What if a whole component should sometimes show nothing at all? Think of a notification banner that only appears when there is news.

A component must return something. The clean way to say “draw nothing” is to return null.

function Banner() {
  const hasNews = false;

  if (!hasNews) {
    return null;
  }

  return <div className="banner">Big update is live!</div>;
}

Here is the idea.

• if (!hasNews) means “if there is no news”.
• In that case we return null, and React renders nothing for this component. No empty box, no leftover space.
• If there is news, the code goes past the if and returns the real banner.

Returning null is a tidy way for a component to render nothing when it has nothing to show.

⚠️ Common Mistakes

• Trying to put a full if statement directly inside JSX braces. You can’t. Use a ternary inside the braces, or move the if above the return.

// ❌ Avoid: an if statement does not fit inside braces
return <div>{if (isLoggedIn) { ... }}</div>;

// ✅ Good: a ternary fits, because it produces a value
return <div>{isLoggedIn ? <Home /> : <Login />}</div>;

• Using && with a number that can be 0. React prints the 0. Compare it instead.

// ❌ Avoid: shows a stray 0 when count is 0
{count && <p>You have items.</p>}

// ✅ Good: a real true or false check
{count > 0 && <p>You have items.</p>}

• Forgetting that a component must always return something. If you skip the return null, your code can crash. Always give every path a value.

✅ Best Practices

• Reach for a ternary when you are choosing between two views.
• Reach for && when it is “show this thing or show nothing”.
• Move the logic into a variable above the return once the JSX inside the braces gets long.
• Return null when the whole component should render nothing.
• Always use a real true or false condition with &&, never a bare number.

🧩 What You’ve Learned

• ✅ Conditional rendering lets your JSX pick what to show based on a true or false value.
• ✅ The ternary condition ? <A /> : <B /> chooses between two views right inside the braces.
• ✅ The logical AND condition && <A /> shows something only when the condition is true, and nothing when it is false.
• ✅ You can store JSX in a variable before the return to keep big choices readable.
• ✅ Returning null from a component tells React to render nothing at all.

🚀 What’s Next?

Now that you can show things based on a condition, the next step is showing many things at once. Think of a whole list of items from an array.

Rendering Lists with JSX