Embedding expressions in JSX in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to embed a JavaScript expression inside JSX.

React

function Greeting() {
  const name = "Alice";
  return <h1>Hello, [1]!</h1>;
}

Drag options to blanks, or click blank then click option'

A"name"

Bname

C{name}

Dname()

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the variable name, which renders it as a string.

Adding extra curly braces inside JSX braces.

In JSX, to embed a JavaScript variable, you use curly braces around the variable name. Here, the blank is inside JSX braces already, so just the variable name 'name' is needed.

2fill in blank

medium

Complete the code to embed a JavaScript expression that calculates the sum inside JSX.

React

function Sum() {
  const a = 5;
  const b = 3;
  return <p>Sum is: [1]</p>;
}

Drag options to blanks, or click blank then click option'

A{a + b}

B"a + b"

Ca + b

Da.concat(b)

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the expression inside quotes, which makes it a string.

Adding extra curly braces inside JSX braces.

Inside JSX braces, you write JavaScript expressions directly. Since the code already has JSX braces, just write 'a + b' to calculate the sum.

3fill in blank

hard

Fix the error in embedding a function call inside JSX.

React

function Welcome() {
  function getName() {
    return "Bob";
  }
  return <h2>Hello, [1]!</h2>;
}

Drag options to blanks, or click blank then click option'

AgetName()

BgetName

C"getName()"

D{getName()}

Attempts:

3 left

💡 Hint

Common Mistakes

Using the function name without parentheses, which embeds the function itself, not its result.

Putting the function call inside quotes, which renders it as a string.

To embed the result of a function call inside JSX, you call the function inside the JSX braces. Since the code already has JSX braces, just write 'getName()'.

4fill in blank

hard

Fill both blanks to embed a conditional expression inside JSX.

React

function Status({ isOnline }) {
  return <p>User is [1] ? "Online" : [2]</p>;
}

Drag options to blanks, or click blank then click option'

A{isOnline}

B"Offline"

COffline

DisOnline

Attempts:

3 left

💡 Hint

Common Mistakes

Not using braces around the condition.

Not quoting the string 'Offline'.

The condition must be inside JSX braces to evaluate it. The false case is a string, so it needs quotes.

5fill in blank

hard

Fill all three blanks to embed a list of items inside JSX using map.

React

function ItemList({ items }) {
  return (
    <ul>
      {items.[1]([2] => (
        <li key=[3]>{item}</li>
      ))}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Amap

Bitem

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'filter' instead of 'map'.

Using a different variable name than 'item' inconsistently.

Not providing a unique key prop.

To render a list, use the 'map' method on the array. The arrow function takes 'item' as parameter, and the key uses 'item' as unique identifier.

Practice

1. In React JSX, how do you embed a JavaScript variable name inside a <p> tag to display it?

easy

A. name

B. {name}

C. ${name}

D. \{name\}

Solution

1. Step 1: Understand JSX embedding syntax

   In JSX, JavaScript expressions must be wrapped in curly braces {} to be evaluated and rendered.

2. Step 2: Apply embedding to variable

   To display the variable name, write it inside curly braces within the JSX tag: {name}.

3. Final Answer:

   <p>{name}</p> -> Option B

4. Quick Check:

   Use curly braces {} to embed variables [OK]

Hint: Use curly braces {} to embed variables in JSX [OK]

Common Mistakes:

• Using quotes instead of curly braces
• Trying to use template literals inside JSX directly
• Escaping curly braces incorrectly

2. Which of the following is the correct way to embed a JavaScript expression that adds two numbers inside JSX?

easy

A. {2 + 3}

B. 2 + 3

C. ${2 + 3}

D. {'2 + 3'}

Solution

1. Step 1: Recognize expression embedding

   JSX requires expressions inside curly braces to evaluate them, so {2 + 3} will calculate the sum.

2. Step 2: Identify correct syntax

   {2 + 3} correctly uses curly braces with the expression 2 + 3. Other options treat it as plain text or incorrect syntax.

3. Final Answer:

   <div>{2 + 3}</div> -> Option A

4. Quick Check:

   Curly braces evaluate expressions in JSX [OK]

Hint: Wrap expressions in {} to evaluate inside JSX [OK]

Common Mistakes:

• Putting expressions as plain text without braces
• Using template literals without braces
• Wrapping expressions in quotes

3. What will be rendered by this React component?

function Greeting() {
  const hour = 10;
  return <h1>Good {hour < 12 ? 'Morning' : 'Evening'}!</h1>;
}

medium

A. Good {hour < 12 ? 'Morning' : 'Evening'}!

B. Good Evening!

C. SyntaxError

D. Good Morning!

Solution

1. Step 1: Evaluate the conditional expression

   The variable hour is 10, which is less than 12, so the condition hour < 12 is true.

2. Step 2: Determine the rendered string

   Because the condition is true, the expression returns 'Morning', so the rendered output is <h1>Good Morning!</h1>.

3. Final Answer:

   <h1>Good Morning!</h1> -> Option D

4. Quick Check:

   Conditional expression inside {} renders correct text [OK]

Hint: Evaluate expressions inside {} before rendering [OK]

Common Mistakes:

• Thinking JSX shows raw expressions
• Confusing true/false in ternary
• Missing curly braces for expressions

4. Identify the error in this JSX snippet:

const count = 5;
return <div>You have {count} new messages</div>;

medium

A. No error, code is correct

B. Missing curly braces around count

C. JSX must use parentheses around return value

D. Curly braces should be escaped

Solution

1. Step 1: Check expression embedding

   The variable count is correctly embedded inside curly braces {count} within JSX.

2. Step 2: Verify JSX syntax

   The JSX syntax is valid; parentheses around return are optional for single-line JSX.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Curly braces correctly embed variables in JSX [OK]

Hint: Curly braces embed variables; parentheses optional for single JSX line [OK]

Common Mistakes:

• Thinking parentheses are mandatory for return
• Trying to escape curly braces unnecessarily
• Omitting curly braces around variables

5. Given this React component, what will be the output?

function ListItems() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map(item => <li key={item}>{item.length > 5 ? item : 'Short'}</li>)}
    </ul>
  );
}

hard

A. ShortShortShort

B. AppleBananaCherry

C. ShortBananaCherry

D. Runtime error due to missing keys

Solution

1. Step 1: Evaluate each item length

   Items are 'Apple'(5), 'Banana'(6), 'Cherry'(6). The condition item.length > 5 is true for 'Banana' and 'Cherry', false for 'Apple'.

2. Step 2: Apply conditional rendering

   For 'Apple', length is 5 (not > 5), so it renders 'Short'. For 'Banana' and 'Cherry', it renders the item name.

3. Step 3: Check keys and JSX structure

   Each <li> has a unique key from the item string, so no error occurs.

4. Final Answer:

   <ul><li>Short</li><li>Banana</li><li>Cherry</li></ul> -> Option C

5. Quick Check:

   Conditional expression inside map renders correct list [OK]

Hint: Check condition inside map for each item before rendering [OK]

Common Mistakes:

• Assuming all items render their names
• Forgetting to add keys in list items
• Confusing length comparison operator