⚛️ Conditional Rendering in React (if, &&, ? :)

? Quick Overview

Conditional rendering in React means displaying elements or components based on certain conditions. It works just like regular JavaScript conditions — you decide what to show depending on state or variables.

For example, you show a “Login” button if a user is logged out, and a “Logout” button if the user is logged in.

✨ Conditional rendering = “Show this UI only when a condition is true.”

? Key Concepts

• if statement – clear branching logic, often used before the return.
• Logical AND (&&) – render something only when a condition is true.
• Ternary operator ? : – quickly choose between two JSX blocks.
• Combining conditions – mix all of these for complex UIs like dashboards.

? Using if Statements

The if statement is useful when you want very readable logic. You decide which JSX block to return based on props or state.

// Conditionally return different JSX using an if...else block
function Greeting(props) {
if (props.isLoggedIn) {
return <h2>Welcome back!</h2>;
} else {
return <h2>Please sign in.</h2>;
}
}

? Using Logical AND (&&)

The && operator lets you render a piece of UI only when a condition is true. If the condition is false, React ignores the JSX on the right-hand side.

// Show the message only when there is at least one notification
function Notifications({ count }) {
return (
<div>
<h3>Notifications</h3>
{count > 0 && <p>You have {count} new messages.</p>}
</div>
);
}

? Using the Ternary Operator (? :)

The ternary operator provides a compact way to choose between two JSX results. It is often used directly inside JSX for simple conditions.

// Use a ternary expression inside JSX to switch content
function UserStatus({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
</div>
);
}

? Combining Conditions

You can mix if, &&, and the ternary operator for more complex flows, such as dashboards where only admins can see some parts.

// Mix ternary and && to handle login and role-based messages
function Dashboard({ isLoggedIn, isAdmin }) {
return (
<div>
{isLoggedIn ? (
<>
<h2>Welcome User</h2>
{isAdmin && <p>You have admin access.</p>}
</>
) : (
<h2>Please login to continue.</h2>
)}
</div>
);
}

? Rules & Best Practices

• ✅ Avoid putting heavy business logic directly inside JSX — move it to helper functions.
• ✅ Always return valid JSX (a single root element from each component).
• ✅ Use ternary operators for simple two-way choices.
• ✅ Use && when you want to conditionally render something without an “else”.
• ⚠️ Avoid deeply nested ternaries — they make the code hard to read.