Why client components handle interactivity in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark a React component as a client component in Next.js.

NextJS

"use client";

export default function Button() {
  return <button>[1]Click me</button>;
}

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

AonClick

BclassName

Cstyle

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using attributes like className instead of event handlers for interactivity.

Client components handle interactivity, so you add event handlers like onClick to respond to user actions.

2fill in blank

medium

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

NextJS

"use client";

import [1] from 'react';

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

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

AuseEffect

BuseState

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks that don't manage state like useEffect or useRef.

Client components use useState to manage interactive state like counters.

3fill in blank

hard

Fix the error in the client component by adding the missing directive.

NextJS

export default function Clicker() {
  const [clicked, setClicked] = useState(false);
  return <button onClick={() => setClicked(true)}>Click me</button>;
}

// Missing something here: [1]

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

A"use client";

B"use strict";

C"use server";

D"use jsx";

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" or other unrelated directives.

Client components in Next.js must start with "use client"; to enable interactivity.

4fill in blank

hard

Fill both blanks to complete a client component that updates state on button click.

NextJS

"use client";

import { [1] } from 'react';

export default function Toggle() {
  const [on, setOn] = [2](false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing different hooks for import and usage.

The useState hook is imported and used to create state in client components.

5fill in blank

hard

Fill all three blanks to create a client component that tracks input text and displays it.

NextJS

"use client";

import { [1] } from 'react';

export default function TextInput() {
  const [text, setText] = [2]('');
  return (
    <>
      <input type="text" value={text} onChange={e => setText(e.target.[3])} />
      <p>You typed: {text}</p>
    </>
  );
}

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

AuseState

BsetText

Cvalue

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event property like 'text' or 'target' instead of 'value'.

The useState hook manages the text state, and value gets the input's current value from the event.