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.