React vs traditional JavaScript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React functional component that returns a simple greeting.

React

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

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

A<h1>Hello, friend!</h1>

B{Hello, friend!}

C"Hello, friend!"

DHello, friend!

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around text, which displays the quotes

Wrapping simple text in curly braces

In React JSX, text inside tags is written directly without quotes.

2fill in blank

medium

Complete the code to update state using React's useState hook.

React

const [count, setCount] = React.useState(0);

function increment() {
  setCount([1]);
}

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

A++count

Bcount++

Ccount + 1

Dcount += 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using count++ which mutates the variable

Trying to assign with += inside setState

React state updates should use new values, not mutate existing ones.

3fill in blank

hard

Fix the error in the React event handler to correctly log the button click.

React

<button onClick=[1]>Click me</button>

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

A() => console.log('Clicked!')

Bconsole.log('Clicked!')

Cconsole.log

Dfunction console.log('Clicked!')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing console.log('Clicked!') directly which runs immediately

Using invalid function syntax

Event handlers need a function, so wrap the log in an arrow function.

4fill in blank

hard

Fill both blanks to create a React component that renders a list from an array.

React

function ItemList() {
  const items = ['apple', 'banana', 'cherry'];
  return (
    <ul>
      {items.[1](item => <li key={item}>[2]</li>)}
    </ul>
  );
}

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

Amap

BforEach

Citem

Ditem.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using forEach which returns undefined

Trying to display the whole array instead of each item

Use map to create elements from an array and display the item text.

5fill in blank

hard

Fill all three blanks to create a controlled input component in React.

React

function NameInput() {
  const [name, setName] = React.useState('');
  return (
    <input
      type="text"
      value=[1]
      onChange={e => [2](e.target.[3])}
      aria-label="Name input"
    />
  );
}

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

Aname

BsetName

Cvalue

Dname.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using e.target.name instead of e.target.value

Not updating state on change

Setting value to something other than the state variable

The input's value is controlled by state, and onChange updates that state with the input's current value.