Ternary operator usage in React - Step-by-Step Execution

Concept Flow - Ternary operator usage

Evaluate condition

Yes↓

Use expression if true

↓

Render true branch

No↓

Use expression if false

↓

Render false branch

The ternary operator checks a condition and chooses one of two expressions to use based on true or false.

Execution Sample

React

const Greeting = ({ isLoggedIn }) => {
  return (
    <div>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</div>
  );
};

This React component shows a message based on whether the user is logged in using a ternary operator.

Execution Table

Step	Condition (isLoggedIn)	Ternary Result	Rendered Output
1	true	'Welcome back!'	<div>Welcome back!</div>
2	false	'Please sign in.'	<div>Please sign in.</div>

💡 Rendering completes after choosing the correct expression based on isLoggedIn value.

Variable Tracker

Variable	Start	After Step 1	After Step 2
isLoggedIn	undefined	true	false
Ternary Result	undefined	'Welcome back!'	'Please sign in.'

Key Moments - 2 Insights

Why does the component show 'Please sign in.' when isLoggedIn is false?

Because the ternary operator evaluates the condition as false and selects the expression after the colon, as shown in execution_table row 2.

Can the ternary operator return React elements instead of strings?

Yes, the ternary operator can return any valid JSX, not just strings, so you can render different elements based on the condition.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output when isLoggedIn is true?

A <div>Please sign in.</div>

B <div>Welcome back!</div>

C <div>Hello!</div>

D <div>Goodbye!</div>

💡 Hint

Check the row where Condition (isLoggedIn) is true in the execution_table.

At which step does the ternary operator select 'Please sign in.'?

A Step 2

B Step 3

C Step 1

D Never

💡 Hint

Look at the execution_table rows and find when the condition is false.

If isLoggedIn changes from false to true, what happens to the ternary result?

A It stays 'Please sign in.'

B It becomes undefined

C It changes to 'Welcome back!'

D It throws an error

💡 Hint

Check variable_tracker for Ternary Result changes after each step.

Concept Snapshot

Ternary operator syntax: condition ? exprIfTrue : exprIfFalse
Used inside JSX to choose what to render based on a condition.
Evaluates condition first, then picks one expression.
Great for simple if-else rendering in React components.
Keeps code concise and readable.

Full Transcript

This visual trace shows how the ternary operator works in React. The component Greeting uses a condition isLoggedIn. If true, it renders 'Welcome back!'. If false, it renders 'Please sign in.'. The execution table shows two steps: one for true and one for false. The variable tracker follows isLoggedIn and the ternary result values. Key moments clarify why the output changes based on the condition. The quiz tests understanding of which output matches which condition and how changes affect rendering. The snapshot summarizes the ternary operator usage in React JSX.