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.