If conditions in JSX in React - Step-by-Step Execution

Concept Flow - If conditions in JSX

Start Render

↓

Evaluate Condition

↓

Render JSX

↓

Update DOM

React checks the condition during render. If true, it shows one JSX part; if false, it shows another or nothing.

Execution Sample

React

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

This component shows a welcome message if logged in, else asks to sign in.

Execution Table

Step	isLoggedIn	Condition (isLoggedIn ?)	Rendered JSX	DOM Update
1	true	true	<p>Welcome back!</p>	Shows 'Welcome back!' message
2	false	false	<p>Please sign in.</p>	Shows 'Please sign in.' message
3	null	false	<p>Please sign in.</p>	Shows 'Please sign in.' message
4	undefined	false	<p>Please sign in.</p>	Shows 'Please sign in.' message
5	0	false	<p>Please sign in.</p>	Shows 'Please sign in.' message
6	''	false	<p>Please sign in.</p>	Shows 'Please sign in.' message

💡 Rendering ends after JSX is chosen based on condition.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6
isLoggedIn	undefined	true	false	null	undefined	0	''

Key Moments - 2 Insights

Why does the component show 'Please sign in.' when isLoggedIn is null or undefined?

Because in the execution_table rows 3 and 4, the condition evaluates to false for null and undefined, so the else JSX is rendered.

What happens if isLoggedIn is 0 or an empty string?

As shown in rows 5 and 6, 0 and '' are treated as false in the condition, so the else JSX is shown.

Visual Quiz - 3 Questions

Look at the execution_table, what JSX is rendered when isLoggedIn is true?

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

B Nothing is rendered

C <p>Welcome back!</p>

D An error occurs

💡 Hint

Check row 1 in the execution_table where isLoggedIn is true.

At which step does the condition become false for the first time?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the Condition column in execution_table rows.

If isLoggedIn was changed to a non-empty string, how would the rendered JSX change?

A It would render <p>Welcome back!</p>

B It would render <p>Please sign in.</p>

C It would render nothing

D It would cause an error

💡 Hint

Non-empty strings are truthy in JavaScript, so condition becomes true.

Concept Snapshot

JSX if conditions use JavaScript expressions inside braces.
Use ternary: condition ? JSX if true : JSX if false.
Falsy values (false, 0, '', null, undefined) render the else part.
Truthy values render the true part.
This controls what React shows on screen.

Full Transcript

In React JSX, you can use if conditions by writing JavaScript expressions inside curly braces. The most common way is using the ternary operator: condition ? true JSX : false JSX. React evaluates the condition during rendering. If the condition is true, it shows the first JSX; if false, it shows the second. For example, if isLoggedIn is true, it shows 'Welcome back!'. If false or other falsy values like null or empty string, it shows 'Please sign in.'. This lets you control what the user sees based on state or props. Remember, JavaScript truthy and falsy rules apply here.