Conditional styling patterns in NextJS - Step-by-Step Execution

Concept Flow - Conditional styling patterns

Start Component Render

↓

Evaluate Condition

↓

Apply Style A

↓

Render with Styles

↓

End Render

The component checks a condition during render, applies one style if true, another if false, then renders with the chosen style.

Execution Sample

NextJS

export default function Button({ isActive }) {
  return (
    <button className={isActive ? 'bg-blue-500' : 'bg-gray-300'}>
      Click me
    </button>
  )
}

A button component that changes background color based on the isActive prop.

Execution Table

Step	isActive Prop	Condition (isActive ?)	Class Applied	Rendered Output
1	true	true	'bg-blue-500'	Button with blue background
2	false	false	'bg-gray-300'	Button with gray background
3	undefined	false	'bg-gray-300'	Button with gray background

💡 Rendering ends after applying the style based on the condition.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
isActive	undefined	true	false	undefined
className	''	'bg-blue-500'	'bg-gray-300'	'bg-gray-300'

Key Moments - 2 Insights

Why does the button use 'bg-gray-300' when isActive is undefined?

Because the condition 'isActive ?' treats undefined as false, so the false branch applies 'bg-gray-300' as shown in execution_table row 3.

Can we apply multiple classes conditionally?

Yes, by combining strings or using libraries like clsx, but the core pattern is the same: evaluate condition, then choose classes accordingly.

Visual Quiz - 3 Questions

Look at the execution table, what class is applied when isActive is false?

A No class applied

B 'bg-blue-500'

C 'bg-gray-300'

D 'bg-green-500'

💡 Hint

Check execution_table row 2 under 'Class Applied'

At which step does the condition evaluate to true?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the 'Condition (isActive ?)' column in execution_table

If isActive changes from false to true, how does className change?

A From 'bg-blue-500' to 'bg-gray-300'

B From 'bg-gray-300' to 'bg-blue-500'

C No change

D Class is removed

💡 Hint

Compare variable_tracker values for className after Step 1 and Step 2

Concept Snapshot

Conditional styling in Next.js:
Use JavaScript conditions inside JSX to choose class names.
Syntax: className={condition ? 'classA' : 'classB'}
True applies classA, false applies classB.
Works with any boolean expression.
Useful for dynamic UI styles.

Full Transcript

This visual execution shows how conditional styling works in Next.js components. The component receives a prop called isActive. During rendering, it checks if isActive is true or false. If true, it applies the class 'bg-blue-500' to the button, making it blue. If false or undefined, it applies 'bg-gray-300', making it gray. The execution table tracks these steps with different isActive values. The variable tracker shows how isActive and className change. Key moments clarify why undefined counts as false and how to handle multiple classes. The quiz tests understanding of which classes apply at each step. This pattern helps create interactive, styled components that respond to state or props.