Ternary operator usage in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component render?

Consider this React functional component using a ternary operator. What will be displayed when is rendered?

React

import React from 'react';

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

export default Greeting;

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

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

C <div></div>

D SyntaxError: Unexpected token

💡 Hint

Check the value of the isLoggedIn prop and how the ternary operator chooses what to render.

The ternary operator checks if isLoggedIn is true. Since it is true, it renders the first expression:

Welcome back!

inside the div.

❓ state_output

intermediate

What is the output after clicking the button once?

This React component uses a ternary operator to display text based on state. What text will be shown after the button is clicked once?

React

import React, { useState } from 'react';

function ToggleText() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>{isOn ? 'The switch is ON' : 'The switch is OFF'}</p>
      <button onClick={() => setIsOn(!isOn)}>Toggle</button>
    </div>
  );
}

export default ToggleText;

A The switch is OFF

B No text is displayed

C The switch is ON

D TypeError: setIsOn is not a function

💡 Hint

The initial state is false. Clicking the button toggles it to true.

Initially, isOn is false, so the text shows 'The switch is OFF'. Clicking the button toggles isOn to true, so the text changes to 'The switch is ON'.

📝 Syntax

advanced

Which option correctly uses a ternary operator inside JSX?

Select the option that correctly uses a ternary operator to conditionally render a message inside a React component.

A return <div>{isActive ? <p>Active</p> : <p>Inactive</p>}</div>;

B return <div>{if (isActive) {<p>Active</p>} else {<p>Inactive</p>}}</div>;

C return <div>{isActive && <p>Active</p> || <p>Inactive</p>}</div>;

D return <div>{isActive ? <p>Active</p> else <p>Inactive</p>}</div>;

💡 Hint

Remember that JSX expressions must be valid JavaScript expressions. Ternary operators have a specific syntax.

Option A uses the correct ternary syntax: condition ? exprIfTrue : exprIfFalse. Options B and D have invalid syntax, and A uses logical operators incorrectly.

🔧 Debug

advanced

Why does this React component throw an error?

This component throws an error when rendered. What is the cause?

React

function Status({ status }) {
  return (
    <div>
      {status === 'loading' ? <p>Loading...</p> : status === 'error' ? <p>Error!</p> : <p>Done</p>}
    </div>
  );
}

export default Status;

A Nested ternary operators without parentheses cause ambiguity and error

B The component is missing a return statement

C The component uses invalid JSX tags

D The code runs correctly without errors

💡 Hint

Check if nested ternary operators are allowed in JSX without extra parentheses.

Nested ternary operators are valid in JSX and do not cause errors here. The component returns JSX correctly and uses valid tags.

🧠 Conceptual

expert

What is the main advantage of using ternary operators in React JSX?

Why do developers often prefer ternary operators over if-else statements inside JSX?

A Ternary operators allow inline conditional rendering as expressions, which if-else statements cannot do inside JSX

B Ternary operators execute faster than if-else statements in React components

C If-else statements cause React to crash, but ternary operators do not

D Ternary operators automatically memoize components, improving performance

💡 Hint

Think about what JSX expects inside curly braces and how expressions differ from statements.

JSX expects expressions inside curly braces. Ternary operators are expressions and can be used inline. If-else statements are statements and cannot be used directly inside JSX.