If conditions in JSX in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this React component render?

Consider this React component using an if condition inside JSX. What will it display when isLoggedIn is true?

React

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

A <div></div>

B <div><h1>Please sign up.</h1></div>

C <div><h1>Welcome back!</h1></div>

D SyntaxError: Unexpected token '?'

💡 Hint

Look at the ternary operator inside the JSX and what happens when the condition is true.

The ternary operator checks if isLoggedIn is true. If yes, it renders <h1>Welcome back!</h1>. Otherwise, it renders <h1>Please sign up.</h1>.

📝 Syntax

intermediate

Which option correctly uses an if statement inside JSX?

You want to conditionally render a message only if showMessage is true. Which code snippet is valid React JSX?

A return (<div>{showMessage && <p>Hello!</p>}</div>);

B return (<div>{showMessage ? <p>Hello!</p> : null}</div>);

C return (<div>{showMessage ? <p>Hello!</p> : }</div>);

D return (<div>{if(showMessage) { <p>Hello!</p> }}</div>);

💡 Hint

Remember that JSX expressions cannot contain statements like if directly.

JSX allows expressions but not statements inside curly braces. Using showMessage && <p>Hello!</p> is a common pattern to conditionally render elements.

🔧 Debug

advanced

Why does this React component cause an error?

Look at this component code. Why does it cause a syntax error?

React

function Status({ isOnline }) {
  return (
    <div>
      {if (isOnline) {
        <span>Online</span>
      } else {
        <span>Offline</span>
      }}
    </div>
  );
}

A The <span> tags are not closed properly.

B JSX does not allow if statements inside curly braces; only expressions are allowed.

C The component is missing a return statement.

D The isOnline prop is not defined.

💡 Hint

Think about what JSX allows inside curly braces.

JSX curly braces expect expressions, not statements like if. Using if inside curly braces causes a syntax error.

❓ state_output

advanced

What is the output after clicking the button twice?

This React component toggles a message when the button is clicked. What will it display after two clicks?

React

import React, { useState } from 'react';

function ToggleMessage() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <p>The message is visible</p>}
    </div>
  );
}

A <div><button>Toggle</button><p></p></div>

B <div><button>Toggle</button><p>The message is visible</p><p>The message is visible</p></div>

C <div><button>Toggle</button><p>The message is visible</p></div>

D <div><button>Toggle</button></div>

💡 Hint

Each click toggles the boolean state. Think about the initial state and toggling twice.

Initial state is false, so no message. First click sets show to true, message appears. Second click sets show back to false, message disappears.

🧠 Conceptual

expert

Which approach correctly handles multiple if conditions in JSX?

You want to render different greetings based on the time of day using JSX. Which option correctly implements multiple conditions?

A return (<div>{hour < 12 ? <p>Good morning</p> : hour < 18 ? <p>Good afternoon</p> : <p>Good evening</p>}</div>);

B return (<div>{hour < 12 && <p>Good morning</p>} {hour >= 12 && hour < 18 && <p>Good afternoon</p>} {hour >= 18 && <p>Good evening</p>}</div>);

C return (<div>{if (hour < 12) {<p>Good morning</p>} else if (hour < 18) {<p>Good afternoon</p>} else {<p>Good evening</p>}}</div>);

D return (<div>{hour < 12 ? <p>Good morning</p> : if (hour < 18) {<p>Good afternoon</p>} else {<p>Good evening</p>}}</div>);

💡 Hint

JSX allows nested ternary operators but not if statements inside curly braces.

Option A uses nested ternary operators, which is valid JSX. Option A and D use if statements inside JSX, which is invalid. Option A renders multiple paragraphs if conditions overlap.

Practice

1. Which of the following is the correct way to conditionally render a message in JSX when isLoggedIn is true?

easy

A. {if (isLoggedIn) <p>Welcome back!</p>}

B. {isLoggedIn && <p>Welcome back!</p>}

C. {isLoggedIn ? <p>Welcome back!</p>}

D. {isLoggedIn || <p>Welcome back!</p>}

Solution

1. Step 1: Understand JSX conditional rendering with &&

   In JSX, condition && expression renders the expression only if the condition is true.

2. Step 2: Check each option's syntax

   {isLoggedIn && <p>Welcome back!</p>} uses {isLoggedIn && <p>Welcome back!</p>}, which is correct. {if (isLoggedIn) <p>Welcome back!</p>} uses an invalid if statement inside JSX. {isLoggedIn ? <p>Welcome back!</p>} uses an incomplete ternary operator without the false branch (`: expression`), causing a syntax error. {isLoggedIn || <p>Welcome back!</p>} uses ||, which is incorrect for this purpose.

3. Final Answer:

   {isLoggedIn && <p>Welcome back!</p>} -> Option B

4. Quick Check:

   Use && for simple true condition rendering [OK]

Hint: Use && to show content only if true [OK]

Common Mistakes:

• Trying to use if statements directly inside JSX
• Using || instead of && for conditional rendering
• Confusing ternary with && when only one condition is needed

2. Which JSX snippet correctly uses a ternary operator to show <p>Hello</p> if showHello is true, otherwise <p>Goodbye</p>?

easy

A. {showHello && <p>Hello</p> else <p>Goodbye</p>}

B. {showHello ? <p>Goodbye</p> : <p>Hello</p>}

C. {if (showHello) <p>Hello</p> else <p>Goodbye</p>}

D. {showHello ? <p>Hello</p> : <p>Goodbye</p>}

Solution

1. Step 1: Understand ternary syntax in JSX

   The ternary operator syntax is condition ? expressionIfTrue : expressionIfFalse.

2. Step 2: Match the expressions to the condition

   {showHello ? <p>Hello</p> : <p>Goodbye</p>} correctly shows Hello if showHello is true, else Goodbye. {showHello && <p>Hello</p> else <p>Goodbye</p>} uses invalid syntax with else inside JSX. {if (showHello) <p>Hello</p> else <p>Goodbye</p>} tries to use if statement inside JSX, which is invalid. {showHello ? <p>Goodbye</p> : <p>Hello</p>} reverses the messages.

3. Final Answer:

   {showHello ? <p>Hello</p> : <p>Goodbye</p>} -> Option D

4. Quick Check:

   Ternary = condition ? true : false [OK]

Hint: Ternary: condition ? true : false for two choices [OK]

Common Mistakes:

• Using if/else statements directly inside JSX
• Swapping true and false expressions
• Using && when two choices are needed

3. What will be rendered by this React component?

function Greeting({ isMorning }) {
  return (
    <div>
      {isMorning ? <h1>Good morning!</h1> : <h1>Good evening!</h1>}
      {isMorning && <p>Have a nice day!</p>}
    </div>
  );
}

If isMorning is false?

medium

A. Good evening!

B. Good evening!Have a nice day!

C. Good morning!Have a nice day!

D. Good morning!

Solution

1. Step 1: Evaluate the ternary expression with isMorning = false

   The ternary isMorning ? <h1>Good morning!</h1> : <h1>Good evening!</h1> renders <h1>Good evening!</h1> because isMorning is false.

2. Step 2: Evaluate the && expression with isMorning = false

   The expression isMorning && <p>Have a nice day!</p> renders nothing because isMorning is false.

3. Final Answer:

   <div><h1>Good evening!</h1></div> -> Option A

4. Quick Check:

   False && anything = nothing [OK]

Hint: False && expression renders nothing; ternary picks false branch [OK]

Common Mistakes:

• Assuming && renders content when condition is false
• Mixing up ternary true/false branches
• Expecting both expressions to render always

4. Identify the error in this JSX snippet:

return (
  <div>
    {isActive ? <p>Active</p>}
  </div>
);

medium

A. No error, code is valid

B. Using if statement inside JSX

C. Missing else part in ternary operator

D. Incorrect use of && operator

Solution

1. Step 1: Check ternary operator syntax

   The ternary operator requires both true and false expressions: condition ? exprIfTrue : exprIfFalse. Here, the false part is missing.

2. Step 2: Understand JSX requirements

   Without the false expression, JSX will throw a syntax error because the ternary is incomplete.

3. Final Answer:

   Missing else part in ternary operator -> Option C

4. Quick Check:

   Ternary needs both ? and : parts [OK]

Hint: Ternary must have both ? and : parts [OK]

Common Mistakes:

• Omitting the else (false) part in ternary
• Confusing ternary with && operator
• Trying to use if statements inside JSX

5. You want to render a list of user names, but only show the name if the user is active. Which JSX code correctly implements this using map and conditional rendering?

hard

A. {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)}

B. {users.map(user => if (user.isActive) return <li key={user.id}>{user.name}</li> )}

C. {users.map(user => user.isActive || <li>{user.name}</li>)}

D. {users.map(user => user.isActive ? <li>{user.name}</li> : <li>Inactive</li>)}

Solution

1. Step 1: Understand conditional rendering inside map

   To render only active users, use a ternary that returns the list item or null.

2. Step 2: Check key usage and syntax

   {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)} correctly uses key={user.id} and returns null for inactive users, which React ignores.

3. Step 3: Analyze other options

   {users.map(user => if (user.isActive) return <li key={user.id}>{user.name}</li> )} uses invalid syntax: `if` statement directly after arrow function requires block `{}` braces. {users.map(user => user.isActive || <li>{user.name}</li>)} uses `||` which renders items for inactive users and misses keys. {users.map(user => user.isActive ? <li>{user.name}</li> : <li>Inactive</li>)} shows inactive users with text, which is not desired.

4. Final Answer:

   {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)} -> Option A

5. Quick Check:

   Use ternary with key and null for conditional list rendering [OK]

Hint: Use ternary with key and null to skip items [OK]

Common Mistakes:

• Missing key prop in list items
• Using if statements inside map without return
• Rendering false or undefined instead of null