Rendering elements in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a simple heading in React.

React

function Hello() {
  return <h1>[1]</h1>;
}

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

AHello, world!

B"Hello, world!"

C<h1>Hello, world!</h1>

D{Hello, world!}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the text

Trying to put HTML tags inside JSX text

In React JSX, text inside tags must be a string or expression. Using quotes around the text renders it correctly.

2fill in blank

medium

Complete the code to render a list of items using React.

React

function ItemList() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map(item => <li key={item}>[1]</li>)}
    </ul>
  );
}

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

A<item>

B"item"

C{item}

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around item which renders the word 'item' literally

Using curly braces inside JSX text incorrectly

Inside JSX, to render a variable, you just write it directly inside the tag. Here, item is a string, so writing item works.

3fill in blank

hard

Fix the error in the React component that renders a button with a click handler.

React

function ClickMe() {
  function handleClick() {
    alert('Clicked!');
  }
  return <button onClick=[1]>Click me</button>;
}

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

AhandleClick

BhandleClick()

C"handleClick"

D{handleClick}

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function immediately instead of passing it

Passing the function name as a string

In React, event handlers should be passed as functions, not called immediately. So pass the function name without parentheses.

4fill in blank

hard

Fill both blanks to create a React component that renders a list of numbers doubled.

React

function DoubleList() {
  const numbers = [1, 2, 3];
  return (
    <ul>
      {numbers.map(n => <li key={n}>[1]</li>)}
    </ul>
  );
}

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

An - 2

Bn + 2

Cn * 2

Dn / 2

Attempts:

3 left

💡 Hint

Common Mistakes

Adding instead of multiplying

Using division or subtraction

To double each number, multiply it by 2 inside the map function.

5fill in blank

hard

Fill all three blanks to create a React component that renders a filtered list of even numbers doubled.

React

function FilteredDoubleList() {
  const numbers = [1, 2, 3, 4, 5];
  const doubledEvens = numbers.filter(n => n [1] 2 === 0).map(n => n [2] 2);
  return (
    <ul>
      {doubledEvens.map(n => <li key={n}>[3]</li>)}
    </ul>
  );
}

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

A%

B*

Cn

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of % for even check

Not doubling the number correctly

Rendering the wrong variable inside the list

To filter even numbers, use modulo % 2 === 0. Then multiply by 2 to double. Finally, render the number n inside the list.