Conditional Rendering with Ternary and Logical &&

The Two Main Scenarios for Conditional UI

When building dynamic interfaces, you'll constantly face two situations:

1. The "Either-Or" Scenario: You need to render one thing or another. For example, showing a "Login" button for a logged-out user and a "Profile" button for a logged-in user.
2. The "Show-or-Hide" Scenario: You need to render something or nothing. For example, showing a notification badge only if there are new messages.

JavaScript gives us concise operators that are perfect for handling these scenarios directly within our JSX.

1. The Ternary Operator (? :) for "Either-Or" Logic

When you need to choose between two different JSX expressions, the ternary operator is the perfect tool. Its syntax is condition ? expressionIfTrue : expressionIfFalse.

Let's imagine we have an isLoggedIn state variable. We can use a ternary operator to display a different welcome message depending on its value:

import { useState } from 'react';

function LoginStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <h1>
        {isLoggedIn ? 'Welcome back!' : 'Please log in.'}
      </h1>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
  );
}

This operator follows a simple branching logic. The following flowchart visualizes exactly how it works.

To see this applied in a React component, let's turn to the official documentation.

Now, let's watch a practical demonstration of how this cleans up your code.

As you can see, the ternary operator is incredibly useful when you have a clear A-or-B choice to make in your UI.

2. The Logical AND Operator (&&) for "Show-or-Hide" Logic

What if you don't have an "else" case? For example, you want to show an admin dashboard link only if the user is an admin, and show nothing otherwise. This is the "show-or-hide" scenario.

For this, you can use the logical && (AND) operator. This works because of a JavaScript feature called "short-circuiting":

• If the expression on the left of && is falsy (e.g., false, null, 0, ""), JavaScript stops and returns that falsy value. React renders false, null, undefined, and "" as nothing.
• If the expression on the left is truthy, JavaScript continues and returns the value of the expression on the right.

In JSX, this looks like:

function Dashboard({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      {/* The link is only rendered if user.isAdmin is true */}
      {user.isAdmin && <a href="/admin">Admin Dashboard</a>}
    </div>
  );
}

Let's read the official documentation for this pattern.

The && Operator Pitfall: The Number Zero

As the documentation warned, there is a common trap with the && operator. What happens if you have a variable unreadMessages that holds a number?

You might write this:
{unreadMessages && <p>You have new messages!</p>}

If unreadMessages is 1 (truthy), you see the message. Great. But if unreadMessages is 0 (falsy), the expression 0 && ... short-circuits and returns 0. Unlike false or null, React renders the number 0 to the screen!

This can lead to confusing bugs where a "0" unexpectedly appears in your UI.

The solution is to always make sure the left side of the && operator is a true boolean (true or false).

Correct way:
{unreadMessages > 0 && <p>You have new messages!</p>}

Now, if unreadMessages is 0, the expression 0 > 0 evaluates to false, and React correctly renders nothing.

This next video does an excellent job of breaking down this specific problem and its solutions.

Conclusion

You've just learned the two most common patterns for conditional rendering in React. They allow you to create dynamic and responsive user interfaces that adapt to your application's state.

Key Takeaways:

• Ternary Operator (? :): Use for "either-or" situations. It's perfect when you need to render one of two options based on a condition.
  • Syntax: condition ? <ShowThisIfTrue /> : <ShowThisIfFalse />
• Logical AND Operator (&&): Use for "show-or-hide" situations. It's ideal for rendering an element only if a condition is met, and rendering nothing otherwise.
  • Syntax: condition && <ShowThisIfTrue />
• The && Pitfall: Be careful not to use numbers as the condition for &&. A value of 0 will be rendered to the screen. Always convert your condition to a true boolean (e.g., count > 0).

Next Up:

Now that we can show or hide individual elements, we're ready to tackle dynamic collections of data. In our next lesson, we will learn how to render a list of components from an array of data using the .map() method. We'll see how conditional rendering can be used inside these lists to make them even more powerful.