# 🌟 React Conditional Rendering — The Complete Guide for Beginners

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:

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

---

# 🟩 1. Using `if/else` Statements

This is the most straightforward approach.

```apache
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.

```apache
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*.

```apache
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.

```apache
const username = "";

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

✔ Useful for default values  
✔ Clean syntax

---

# 🟦 5. Conditional Rendering with Functions

Move complex logic outside JSX.

```apache
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.

```apache
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)

```apache
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.

```apache
<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

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

### ✔ Authentication

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

### ✔ Role-Based UI

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

### ✔ Form Validation

```apache
{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