Ternary operator usage in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the ternary operator in React JSX?

It is a short way to write an if-else condition inside JSX using the syntax: condition ? expressionIfTrue : expressionIfFalse.

beginner

How do you use the ternary operator to conditionally render text in React?

You write something like: {isLoggedIn ? 'Welcome back!' : 'Please log in.'} inside JSX to show different text based on isLoggedIn.

intermediate

Can the ternary operator be nested in React JSX?

Yes, you can nest ternary operators but it can make code hard to read. It's better to keep conditions simple or use helper functions.

intermediate

Why is the ternary operator preferred over if-else statements inside JSX?

Because JSX expects expressions, not statements. The ternary operator is an expression and fits naturally inside JSX curly braces.

beginner

Show a simple React functional component using the ternary operator to display 'ON' or 'OFF' based on a boolean prop.

function Switch({ isOn }) {
  return <div>{isOn ? 'ON' : 'OFF'}</div>;
}

What does the ternary operator syntax look like in React JSX?

A if (condition) { trueExpression } else { falseExpression }

B condition ? trueExpression : falseExpression

C condition && trueExpression

D switch(condition) { case true: trueExpression; }

The ternary operator uses the syntax condition ? trueExpression : falseExpression, which works inside JSX.

Which of these is a valid use of the ternary operator in JSX?

A {isActive ? <p>Active</p> : <p>Inactive</p>}

B if (isActive) { <p>Active</p> } else { <p>Inactive</p> }

C {if isActive then <p>Active</p> else <p>Inactive</p>}

D <p>{if isActive then 'Active' else 'Inactive'}</p>

Only option D uses the ternary operator correctly inside JSX curly braces.

What happens if the condition in a ternary operator is false?

A Both expressions run

B The expression before the question mark (?) runs

C The expression after the colon (:) runs

D Nothing runs

If the condition is false, the expression after the colon (:) is evaluated and rendered.

Is it good practice to nest many ternary operators in JSX?

A Only if you use React class components

B Yes, it is recommended

C Only if you use more than three conditions

D No, it makes code hard to read

Nesting many ternary operators reduces readability; simpler code or helper functions are better.

Which of these is NOT a reason to use the ternary operator in React JSX?

A To replace all JavaScript if statements

B To conditionally render elements

C Because JSX only accepts expressions

D To write concise conditional code

Ternary operators do not replace all if statements; they are used for inline conditional expressions in JSX.

Explain how the ternary operator works in React JSX and why it is useful.

Think about how you show different things on the screen based on a condition.

Describe a simple example of using the ternary operator in a React functional component.

Imagine a switch that shows ON or OFF depending on a true or false value.