State and hooks in client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook needed to manage state in a client component.

NextJS

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

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

AuseState

BuseContext

CuseEffect

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a hook that manages side effects instead of state.

Confusing useState with useEffect or useRef.

The useState hook is used to add state to functional components in React and Next.js client components.

2fill in blank

medium

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

NextJS

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

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

AsetCount

BchangeCount

CupdateCount

DcountSetter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name that is not linked to the state variable.

Confusing the state variable name with the updater function.

The second element returned by useState is the function used to update the state variable. By convention, it is named starting with 'set' followed by the state variable name.

3fill in blank

hard

Complete the button text by adding a descriptive label before the count value.

NextJS

"use client";

import { useState } from 'react';

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

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

AClick me:

BCount:

CPress:

DValue:

Attempts:

3 left

💡 Hint

Common Mistakes

Using unclear or unrelated labels.

Omitting the label which can confuse users.

The string before the count value in the button helps users understand what the number means. 'Count: ' is a clear label.

4fill in blank

hard

Fill in the blank to create a button that increments the count state by 1 when clicked.

NextJS

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

return <button onClick={() => setCount(count [1] 1)}>Increment</button>;

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

A/

B-

C+

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

Confusing the order of operators.

The increment operation adds 1 to the current count using the + operator: setCount(count + 1).

5fill in blank

hard

Fill all three blanks to create a stateful input component that updates its value on change.

NextJS

const [value, [1]] = useState('');

return <input type="text" value={value} onChange={e => [2]([3])} />;

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

AsetValue

Be.target.value

Cvalue

DsetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong updater function name.

Passing the wrong value to the updater function.

Confusing the state variable with the updater function.

The state updater function setValue is called with the new input value e.target.value when the input changes. The current state variable value is used as the input's value.