useState hook introduction in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useState hook from React.

React

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

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

AuseState

BuseRef

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook like useEffect or useContext.

Forgetting to import useState at all.

The useState hook is imported from React to manage state in functional components.

2fill in blank

medium

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

React

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

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

AuseRef

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect or other hooks instead of useState.

Not passing the initial value 0.

Use useState(0) to create a state variable count starting at 0.

3fill in blank

hard

Fix the error in the button's onClick handler to update the count state.

React

<button onClick={() => setCount([1])}>Increase</button>

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

AsetCount + 1

Bcount++

Ccount = count + 1

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using post-increment operator like count++ which doesn't return the new value.

Trying to assign value directly instead of passing to setCount.

To update state, pass the new value count + 1 to setCount. Using count++ or assignments won't work correctly.

4fill in blank

hard

Fill both blanks to create a state variable named name with initial value 'Alice'.

React

const [[1], [2]] = useState('Alice');

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

Aname

BsetName

Cuser

DsetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable and setter names.

Using unrelated names like 'user' or 'setUser'.

The first element is the state variable name, and the second is the setter function setName.

5fill in blank

hard

Fill all three blanks to create a counter component with state and a button to increment.

React

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

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

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

AuseState

Bcount

CsetCount

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import useState.

Mixing up variable and setter names.

Not using the setter function to update state.

Import useState, declare state variable count and setter setCount, then update count on button click.