React apps interact with users — and based on the user’s action or the app’s state, we often need to show or hide UI elements.
This is where Conditional Rendering comes in.

It allows you to render components based on conditions, just like if-else statements in JavaScript.

In this blog, you’ll learn:

✔ What is conditional rendering?
✔ Different methods of conditional rendering
✔ if/else
✔ Ternary operator
✔ Logical AND (&&)
✔ Inline rendering
✔ Switch-case patterns
✔ Showing/hiding components
✔ Real-world best practices

Let’s dive in 🚀

---

🔍 What Is Conditional Rendering in React?

Conditional rendering means:

Render different UI elements depending on the application’s state.

Simple example:

{isLoggedIn ? <Dashboard /> : <Login />}

---

🟩 1. Using if/else Statements

This is the most straightforward approach.

function Message({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome Back!</h2>;
  } else {
    return <h2>Please Login</h2>;
  }
}

✔ Clean
✔ Easy to understand
❌ Not suitable for inline JSX

---

🟪 2. Using the Ternary Operator

Most commonly used because it's compact.

const isOnline = true;

return (
  <div>
    {isOnline ? <p>User is Online</p> : <p>User is Offline</p>}
  </div>
);

✔ Short & clean
✔ Works inside JSX
✔ Best for simple conditions

---

🟧 3. Using Logical AND (&&)

Used when you want to render something only if the condition is true.

const hasNotification = true;

return (
  <div>
    <h1>Dashboard</h1>

    {hasNotification && <p>You have new notifications</p>}
  </div>
);

✔ Perfect for optional UI
✔ Shortest syntax
❌ Doesn’t work well with 0 (because 0 is falsy)

---

🟨 4. Using Logical OR (||) for Fallback UI

Render fallback content if the first value is falsy.

const username = "";

return <h2>{username || "Guest User"}</h2>;

✔ Useful for default values
✔ Clean syntax

---

🟦 5. Conditional Rendering with Functions

Move complex logic outside JSX.

function getStatus(isActive) {
  if (isActive) {
    return <p>Status: Active</p>;
  }
  return <p>Status: Inactive</p>;
}

export default function App() {
  return <div>{getStatus(true)}</div>;
}

✔ Cleaner JSX
✔ Useful for large components

---

🟫 6. Using Switch-Case Pattern

React doesn't support switch inside JSX, but you can use it inside functions.

function RenderComponent({ type }) {
  switch (type) {
    case "admin":
      return <h2>Welcome Admin</h2>;
    case "user":
      return <h2>Hello User</h2>;
    default:
      return <h2>Guest Access</h2>;
  }
}

✔ Great for multiple conditions
✔ Avoids nested ternaries

---

🟥 7. Inline Conditional Rendering (One-Liners)

return (
  <div>
    {count > 5 && <p>Count is greater than 5</p>}
  </div>
);

✔ Simple
✔ Fast
❌ Not recommended for complicated logic

---

🟬 8. Hiding Components Instead of Removing Them

Sometimes, you want to hide a component, not remove it.

<div style={{ display: isOpen ? "block" : "none" }}>
  <p>This is hidden or shown</p>
</div>

✔ Keeps component in DOM
✔ Useful for dropdowns & modals

---

🎯 Real-World Use Cases

✔ Loading State

{loading ? <p>Loading...</p> : <Data />}

✔ Authentication

{user ? <Dashboard /> : <Login />}

✔ Role-Based UI

{role === "admin" && <AdminPanel />}

✔ Form Validation

{error && <p className="error">{error}</p>}

---

⭐ Best Practices for Conditional Rendering

✔ Avoid deeply nested ternaries
✔ Use functions for complex logic
✔ Prefer ternary operator for simple conditions
✔ Use && for optional elements
✔ Keep JSX clean and readable
✔ Extract UI into components when conditions grow

---

🎉 Conclusion

Conditional rendering is a core feature of React that makes your app dynamic and interactive.
In this guide, you learned:

✔ All React conditional rendering techniques
✔ if/else, ternary, &&, ||
✔ Component hiding
✔ Switch-case rendering
✔ Real examples and best practices