Conditional Rendering in React

# Conditional Rendering in React

1. Introduction #

2. Learning Objectives #

• Render JSX elements based on boolean conditions.

• Use the Ternary Operator (condition ? true : false) inside JSX.

• Use Logical AND (&&) for short-circuit rendering.

• Understand when to use early return statements for entire components.

3. Beginner-Friendly Explanations #

What is Conditional Rendering? #

Because JSX is just JavaScript under the hood, we can inject logic right in the middle of our HTML tags using curly braces {}.

4. Syntax Explanation & Approaches #

Approach 1: Early Return (If Statements) #

```jsx id="ch9_ex1" // Example React component function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <h1>Welcome back, user!</h1>; } // If the 'if' block runs, it returns early and this code never runs. return <h1>Please sign up or log in.</h1>; }

### Approach 2: The Ternary Operator (`? :`)
The `if/else` statement is great, but you cannot put it *inside* JSX curly braces. If you want to conditionally render a small piece of UI *inside* a larger chunk of JSX, use the ternary operator.
Syntax: `condition ? renderThisIfTrue : renderThisIfFalse`

jsx id="ch9_ex2" // Example React component function LoginButton({ isLoggedIn }) { return ( <div className="navbar"> <span>MyLogo</span> {/* Condition inside JSX! */} {isLoggedIn ? ( <button>Logout</button> ) : ( <button>Login</button> )} </div> ); }

### Approach 3: Logical AND (`&&`)
Sometimes, you don't have an "else" condition. You just want to say: "If this is true, show it. If false, show nothing." 
In JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. React completely ignores `false` during rendering.

jsx id="ch9_ex3" // Example React component function Notification({ hasUnreadMessages, unreadCount }) { return ( <div> <h2>Inbox</h2> {/* Only render the badge if hasUnreadMessages is true */} {hasUnreadMessages && ( <span className="badge">You have {unreadCount} new messages!</span> )} </div> ); }

## 5. Output Explanations
In `Notification`, if `hasUnreadMessages` is `true`, React evaluates the right side of the `&&` and renders the `<span>`. If it is `false`, React evaluates the entire expression as `false` and renders absolutely nothing in that spot.

## 6. Real-World Examples
- **Loading Spinners:** `{isLoading ? <Spinner /> : <DataGrid />}`
- **Premium Features:** `{user.isPremium && <UnlockProFeaturesBtn />}`
- **Empty States:** `{cartItems.length === 0 ? <EmptyCartImage /> : <CheckoutList />}`

## 7. Common Mistakes
- **Rendering 0 with `&&`:** If you do `{messages.length && <Badge />}` and `messages.length` is `0`, JavaScript treats `0` as falsy, but React will actually render the number `0` to the screen! To fix this, always use a strict boolean comparison: `{messages.length > 0 && <Badge />}`.
- **Using `if` inside JSX:** Writing `<div>{ if(admin) { <AdminPanel/> } }</div>` will throw a syntax error.

## 8. Best Practices
- Use `&&` when there is no "fallback" UI (no "else").
- Use Ternary `? :` when toggling between two distinct UIs.
- Use early `return` if statements when a component is waiting for critical data (e.g., `if (isLoading) return <Spinner />;`).

## 9. Exercises
1. Create a `StockStatus` component that accepts an `inventory` number prop. 
2. If `inventory > 0`, return "In Stock" using a green text color.
3. If `inventory === 0`, return "Out of Stock" using a red text color. Use a ternary operator.

## 10. Mini Project: Login/Logout UI
Let's build a realistic authentication header that combines State, Events, and Conditional Rendering.

jsx id="ch9_proj1" // Example React component import React, { useState } from 'react';

export default function AuthHeader() { // Simulate user authentication state const [isLoggedIn, setIsLoggedIn] = useState(false);

// Helper functions for events const handleLogin = () => setIsLoggedIn(true); const handleLogout = () => setIsLoggedIn(false);

return ( <header className="bg-white shadow-md p-4 flex justify-between items-center max-w-4xl mx-auto rounded-b-lg"> <div className="font-black text-2xl tracking-tighter text-indigo-600"> LogoBrand </div>

<div className="flex items-center gap-4"> {/* Logical && for an admin badge (simulated as always false here for example, but imagine it's a prop) */} {/* {isAdmin && <span className="bg-purple-100 text-purple-700 px-2 py-1 text-xs rounded font-bold">Admin</span>} */}

{/* Ternary operator for the UI toggle */} {isLoggedIn ? ( <div className="flex items-center gap-4"> <span className="text-gray-600 font-medium">Welcome, Developer!</span> <button onClick={handleLogout} className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-medium transition" > Log Out </button> </div> ) : ( <div className="flex gap-2"> <button className="text-gray-600 hover:text-indigo-600 font-medium px-4 py-2 transition"> Sign In </button> <button onClick={handleLogin} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium shadow-sm transition" > Create Account </button> </div> )} </div> </header> ); } ``

Q2: Why can't we use a standard if/else statement directly inside the {} of JSX? A) JSX only accepts React Components inside curly braces. B) if/else are JavaScript statements, and JSX requires expressions that evaluate to a value. C) React deprecates if blocks for performance reasons. *Answer: B*

• Q: What is the risk of using {array.length && <Component />}? *(Answer: If length is 0, React renders a '0' to the DOM. Use array.length > 0 instead).*

16. Next Chapter Recommendation #