Creating first React app - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import React and use the useState hook.

React

import React, { [1] } from 'react';

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

AuseRef

BuseState

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState

Forgetting to import any hooks

The useState hook is used to add state to functional components in React.

2fill in blank

medium

Complete the code to create a state variable called count with initial value 0.

React

const [count, [1]] = useState(0);

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

AcountSetter

BgetCount

CsetCount

DupdateCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong setter function name

Trying to update state directly without setter

The second element returned by useState is the setter function to update the state.

3fill in blank

hard

Fix the error in the JSX to display the count variable inside a paragraph.

React

<p>The count is: [1]</p>

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

Acount

B"count"

C(count)

D{count}

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the variable name without braces

Using quotes which show the word literally

In JSX, JavaScript expressions must be inside curly braces to be evaluated.

4fill in blank

hard

Fill both blanks to create a button that increments count when clicked.

React

<button onClick=[1]>[2]</button>

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

A() => setCount(count + 1)

BIncrement

CDecrement

DsetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Passing setCount directly without a function

Using wrong button text

The onClick needs a function to update state. The button text should say 'Increment'.

5fill in blank

hard

Fill all three blanks to create a simple React component that shows a count and a button to increase it.

React

function Counter() {
  const [[1], [2]] = useState(0);
  return (
    <div>
      <p>Count: [3]</p>
      <button onClick={() => [2]([1] + 1)}>Increase</button>
    </div>
  );
}

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

Acount

BsetCount

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for state and display

Forgetting to use the setter function in onClick

The state variable is count, the setter is setCount, and the displayed value is count.