# Understanding Conditional Rendering in React (2025 Guide) **Conditional rendering in React** is a fundamental concept that allows **React components** to display different UI elements based on application state. It's React's declarative approach to showing or hiding content based on conditions—essential knowledge for any **React developer**. This **React tutorial** covers all **conditional rendering techniques** including logical operators, ternary expressions, and **React best practices** for building maintainable components. --- ## Logical AND (`&&`) Operator The **logical AND operator** is the most common **React conditional rendering pattern** when you want to render something only if a condition is true. It's widely used in **React functional components** for clean, readable code. ```jsx function Greeting({ isLoggedIn }) { return (

Welcome to React!

{isLoggedIn &&

You are logged in.

}

); } ``` - If `isLoggedIn` is `true`, React will render the `

` element. - If `isLoggedIn` is `false`, nothing is rendered. ⚠️ **Common pitfall — numbers with `&&`:** When the left side of `&&` is a falsy number, JavaScript returns that number, and React renders it as text. The classic real-world bug looks like this: ```jsx {items.length && } ``` When `items.length` is `0`, this expression evaluates to `0` — and React renders the literal character `"0"` on the page instead of nothing. (Other falsy values like `false`, `null`, and `undefined` render nothing, which is why this trap is specific to numbers.) Fix it by coercing to a boolean: `{items.length > 0 && }`. ➡️ *Suggested image:* `/images/react-conditional-rendering-and-example.png` (screenshot of code + output). --- ## Ternary Operator (`condition ? trueCase : falseCase`) The ternary operator is best when you want to choose **between two options**. ```jsx function UserStatus({ isLoggedIn }) { return (

{isLoggedIn ?

Welcome back!

Please log in.

}

); } ``` - If `isLoggedIn` is `true`, “Welcome back!” will render. - Otherwise, “Please log in.” will render. 👉 **Best practice:** Use ternaries for **two cases only**. If you find yourself nesting multiple ternaries, switch to `if...else` or `switch` for readability. ➡️ *Suggested image:* `/images/react-conditional-rendering-ternary-example.png` (side-by-side ternary code and output). --- ## `if...else` and `switch` For more complex conditions, handle logic **before the `return` statement** in your component: ```jsx function AccessLevel({ role }) { let message; if (role === "admin") { message = "You have full access."; } else if (role === "editor") { message = "You can edit content."; } else { message = "View-only access."; } return

{message}

; } ``` Or with `switch`: ```jsx function AccessLevel({ role }) { switch (role) { case "admin": return

You have full access.

; case "editor": return

You can edit content.

; default: return

View-only access.

; } } ``` ➡️ *Suggested image:* `/images/react-conditional-rendering-if-switch.png` (flow diagram showing branching logic). --- ## Modern Alternatives These patterns are stable across React 18 and React 19 — conditional rendering semantics haven't changed between versions: - Use **early returns** to simplify conditional rendering. - Combine with **optional chaining (`?.`)** — a JavaScript ES2020 feature, not React-specific — to safely access deeply nested properties. - Leverage **component composition** to avoid deeply nested conditions. Example with early return: ```jsx function Profile({ user }) { if (!user) { return

; } return

{user.name}

; } ``` ➡️ *Suggested image:* `/images/react-conditional-rendering-early-return.png` (screenshot of simple code + "Loading..." UI). --- ## Conclusion **Conditional rendering** is a cornerstone of **React development**. Here's a quick summary of when to use each approach: - Use `&&` for simple **show/hide patterns** in React - Use **ternary operators** for choosing between two UI states - Use **if/else or switch** for complex **React component logic** - Use **early returns** to handle loading and error states cleanly By keeping **React conditional rendering** clean and readable, your components stay easy to understand and maintain. These patterns work across modern **React versions** (React 18 and React 19) and apply equally to **React hooks** and class components. ---

#conditional-rendering

فهم العرض الشرطي في React (دليل 2025)