DEV Community

Cover image for Mastering Conditional Rendering in React: Logical && vs the Ternary Operator
Komfort Kimko
Komfort Kimko

Posted on

1

Mastering Conditional Rendering in React: Logical && vs the Ternary Operator

#react #javascript #beginners #frontend

React is all about building dynamic interfaces — and conditional rendering is one of the most important tools in your toolkit. Whether you're showing a user profile after login or a spinner while data is loading, knowing when and how to render content conditionally is key.

In this post, we'll delve into how to use two of the most common conditional rendering techniques in React: the logical AND (&&) operator and the ternary operator (? :) — with examples, best practices, and a few mistakes to avoid.

🔹 What Is Conditional Rendering?

Conditional rendering in React lets you control what is displayed in the UI based on component state or props.

Think of it as the “if” of your component view:

{isLoggedIn && <p>Welcome back!</p>}

{items.length === 0 ? <p>No items</p> : <ul>{items.map(...)} </ul>}
Enter fullscreen mode Exit fullscreen mode

✅ Using Logical AND (&&)
The logical AND operator is great when you only want to show something if a condition is true or met.

🧩 Example

{isLoggedIn && <h2>Welcome, user!</h2>}
If `isLoggedIn` is `true`, it renders the `<h2>`.
If `false`, it renders nothing.
Enter fullscreen mode Exit fullscreen mode

⚠️ Beware of Falsy Values Like 0

{items.length && <p>{items.length} items</p>} // Renders 0!
Enter fullscreen mode Exit fullscreen mode

Use !!items.length to coerce to a boolean:

{!!items.length && <p>{items.length} items</p>}
Enter fullscreen mode Exit fullscreen mode

✅ Using the Ternary Operator (? :)
Use the ternary operator when you want to display one of two UI blocks.

🧩 Example

{isLoggedIn ? <Dashboard /> : <Login />}
Enter fullscreen mode Exit fullscreen mode

Or inline:

<button>{isLoading ? 'Loading...' : 'Submit'}</button>
Enter fullscreen mode Exit fullscreen mode

💡 Best Practices
1.Prefer Early Returns
Instead of deeply nested ternaries:

return (
  <div>
    {user
      ? user.isAdmin
        ? <AdminPanel />
        : <UserPanel />
      : <Login />}
  </div>
)
Enter fullscreen mode Exit fullscreen mode

Use early returns:

if (!user) return <Login />;
if (user.isAdmin) return <AdminPanel />;
return <UserPanel />;
Enter fullscreen mode Exit fullscreen mode

2.Extract Conditions to Variables
It improves clarity:

const showGreeting = isLoggedIn && user?.name;

return showGreeting ? <h1>Hello, {user.name}</h1> : null;
Enter fullscreen mode Exit fullscreen mode

❗ Common Pitfalls

  • Avoid rendering raw values like false, 0, or undefined.
  • Avoid deeply nested ternaries — extract logic to helpers.
  • Understand _truthy_ and _falsy_ and their usage in JavaScript.

🚀 Final Thoughts
Conditional rendering is one of the most powerful features in React. By mastering && and ? :, you can craft responsive, intuitive interfaces adaptable to user behaviour and application state.

✨ Want More?

Top comments (0)