Event handlers in client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click event handler that updates the count state.

NextJS

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

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

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

A() => count + 1

BsetCount(count + 1)

C() => setCount(count + 1)

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the result of setCount directly instead of a function.

Using a function that does not call setCount.

The onClick event handler needs a function that calls setCount to update the state. Using an arrow function () => setCount(count + 1) ensures the function runs only when clicked.

2fill in blank

medium

Complete the code to prevent the default form submission behavior in the event handler.

NextJS

export default function Form() {
  function handleSubmit(event) {
    [1];
    alert('Form submitted!');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

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

Aevent.stopPropagation()

Bevent.preventDefault()

Cevent.defaultPrevented()

Devent.prevent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.stopPropagation() which only stops event bubbling.

Calling a non-existent method like event.prevent().

To stop the form from refreshing the page on submit, call event.preventDefault() inside the handler.

3fill in blank

hard

Fix the error in the event handler to correctly update the state with the previous count value.

NextJS

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

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

  return <button onClick={increment}>Count: {count}</button>;
}

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

Aprev => prev + 1

Bcount++

C() => count + 1

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using count + 1 directly can cause stale state updates.

Using count++ is invalid because count is immutable.

Using the updater function prev => prev + 1 ensures the state updates correctly even if multiple updates happen quickly.

4fill in blank

hard

Fill both blanks to create a button that toggles between 'ON' and 'OFF' states.

NextJS

import React, { useState } from 'react';

export default function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick=[1]>
      [2] ? 'ON' : 'OFF'
    </button>
  );
}

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

A() => setIsOn(prev => !prev)

BisOn

CsetIsOn

DisOn()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call isOn as a function.

Passing setIsOn directly without a function.

The onClick handler toggles the boolean state by negating the previous value. The button text shows 'ON' if isOn is true, otherwise 'OFF'.

5fill in blank

hard

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

NextJS

import React, { useState } from 'react';

export default function TextInput() {
  const [text, setText] = useState('');

  function handleChange(event) {
    [1](event.[2].[3]);
  }

  return <input type="text" value={text} onChange={handleChange} aria-label="Text input" />;
}

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

AsetText

Btarget

Cvalue

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.value instead of event.target.value.

Calling the state variable instead of the setter function.

The handleChange function updates the state with the current input value from event.target.value by calling setText.