⚛️ React Ternary Operator (JSX)

? Quick Overview

The ternary operator (? :) is a compact way to perform conditional rendering in React JSX. It behaves like an inline if-else and is ideal when you want to toggle between two UI outputs directly inside JSX.

General syntax:

condition ? expressionIfTrue : expressionIfFalse

If condition is true, React evaluates and renders expressionIfTrue, otherwise it renders expressionIfFalse.

? Key Concepts

• The ternary operator is a single expression that chooses between two values or JSX trees.
• It is commonly used for inline UI decisions like switching labels, buttons, or views.
• Both branches of the ternary must return a valid value (e.g., JSX, string, number, component).
• For more complex conditions, avoid deep nesting to keep code readable.

? Syntax & Theory

Basic form in JavaScript:

// Returns valueA when condition is true, otherwise valueB
condition ? valueA : valueB

In React JSX:

• You can use the ternary operator inside { } in JSX.
• Each branch usually returns a JSX element or component.
• When logic grows too big, move it into helper functions or variables.

? Basic JSX Example

Use a ternary to decide whether to show a Login or Logout button based on isLoggedIn.

// Conditionally render Login or Logout button
function LoginButton({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<button className="btn btn-danger">Logout</button>
) : (
<button className="btn btn-primary">Login</button>
)}
</div>
);
}

? Rendering Text or Elements

You can use the ternary operator for simple text messages or full JSX content based on a value like user.

// Show personalized greeting when user is present
function Greeting({ user }) {
return (
<h4>
{user ? `Welcome, ${user}! ?` : "Welcome, Guest!"}
</h4>
);
}

? Conditional Component Rendering

Use ternaries to switch between entire components, such as admin and user views.

// Swap whole components based on isAdmin flag
function AdminPanel() {
return <h5 className="text-danger">Admin Panel</h5>;
}

function UserPanel() {
return <h5 className="text-success">User Panel</h5>;
}

function Dashboard({ isAdmin }) {
return <div>{isAdmin ? <AdminPanel /> : <UserPanel />}</div>;
}

? Nested Ternary Operators

Nested ternaries allow multiple states (like loading, error, success), but they must be used carefully to avoid confusing code.

// Handle loading, error and success states with nested ternary
function StatusIndicator({ status }) {
return (
<p>
{status === "loading"
? "⏳ Loading..."
: status === "error"
? "❌ Error occurred!"
: "✅ Success!"}
</p>
);
}

? Ternary vs Logical AND (&&)

Use ternary when you need to choose between two alternatives. Use && when you only want to conditionally render something when the condition is true.

// Compare logical AND and ternary in JSX
// Using &&
{isAdmin && <p>You are an Admin</p>}

// Using ternary
{isAdmin ? <p>Welcome Admin</p> : <p>Welcome User</p>}

⚙️ Styling with Ternary

Ternaries can dynamically pick classes, inline styles, or labels for theming and mode switches.

// Toggle theme styles and label with a ternary
function ThemeSwitcher({ darkMode }) {
return (
<div
className={darkMode ? "bg-dark text-light p-3" : "bg-light text-dark p-3"}
>
{darkMode ? "? Dark Mode" : "☀️ Light Mode"}
</div>
);
}