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.

Practice

1. In Next.js client components, how do you correctly attach a click event handler to a button?

easy

A. Use onClick="handleClick()" as a string.

B. Use onclick="handleClick()" as a string.

C. Use click={handleClick} without 'on'.

D. Use onClick={handleClick} with a function reference.

Solution

1. Step 1: Understand React event handler syntax

   React and Next.js use camelCase event names and expect a function reference, not a string.

2. Step 2: Identify correct JSX usage

   The correct way is onClick={handleClick}, passing the function directly.

3. Final Answer:

   Use onClick={handleClick} with a function reference. -> Option D

4. Quick Check:

   React event handlers use camelCase and function references [OK]

Hint: Use camelCase and pass function, not string, for events [OK]

Common Mistakes:

• Using lowercase 'onclick' attribute as string
• Passing event handler as a string instead of function
• Omitting 'on' prefix in event name

2. Which of the following is the correct syntax to define an arrow function with block body for a click event handler in a Next.js client component?

easy

A. const handleClick = () => { alert('Clicked!'); }

B. function handleClick() { alert('Clicked!'); }

C. const handleClick = alert('Clicked!');

D. const handleClick = () => alert('Clicked!');

Solution

1. Step 1: Check arrow function syntax

   const handleClick = () => { alert('Clicked!'); } correctly defines an arrow function with braces and a statement inside.

2. Step 2: Compare other options

   const handleClick = () => alert('Clicked!'); uses concise arrow function syntax without braces; function handleClick() { alert('Clicked!'); } uses traditional function declaration; const handleClick = alert('Clicked!'); calls alert immediately, not defining a function.

3. Final Answer:

   const handleClick = () => { alert('Clicked!'); } -> Option A

4. Quick Check:

   Arrow function with braces and alert call is correct [OK]

Hint: Use arrow functions with braces for event handlers [OK]

Common Mistakes:

• Calling alert immediately instead of wrapping in function
• Missing braces for multiple statements
• Using old function syntax unnecessarily

3. What will be the output when the button is clicked in this Next.js client component?

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    Clicked {count} times
  );
}

medium

A. Button text stays 'Clicked 0 times' even after clicks.

B. Button text updates to 'Clicked 1 times' on first click and increments thereafter.

C. Button text shows 'Clicked NaN times' after click.

D. Button causes a runtime error on click.

Solution

1. Step 1: Understand useState and event handler

   The state variable 'count' starts at 0 and increments by 1 on each click via setCount.

2. Step 2: Predict UI update on click

   Clicking the button calls increment, updating count and re-rendering button text with new count.

3. Final Answer:

   Button text updates to 'Clicked 1 times' on first click and increments thereafter. -> Option B

4. Quick Check:

   useState updates UI dynamically on event [OK]

Hint: useState updates state and UI on event triggers [OK]

Common Mistakes:

• Not using useState to update UI
• Calling setCount incorrectly
• Expecting static text without re-render

4. Identify the error in this Next.js client component code snippet:

import { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);
  function toggle() {
    setOn(!on);
  }
  return (
    {on ? 'ON' : 'OFF'}
  );
}

medium

A. useState initial value should be a string, not boolean.

B. The toggle function should use setOn(prev => !prev) instead of setOn(!on).

C. The event handler attribute should be 'onClick' with capital C.

D. The button element must be wrapped in a fragment.

Solution

1. Step 1: Check event handler attribute spelling

   React and Next.js require camelCase event names, so 'onclick' is incorrect; it must be 'onClick'.

2. Step 2: Validate other code parts

   Using setOn(!on) works but can cause stale state; initial boolean is valid; wrapping button is not required.

3. Final Answer:

   The event handler attribute should be 'onClick' with capital C. -> Option C

4. Quick Check:

   Event handlers use camelCase 'onClick' [OK]

Hint: React event handlers always use camelCase like 'onClick' [OK]

Common Mistakes:

• Using lowercase 'onclick' instead of 'onClick'
• Ignoring stale state issues in setState
• Thinking JSX requires fragments for single elements

5. You want to create a Next.js client component with a text input that updates a greeting message live as the user types. Which approach correctly uses event handlers and state to achieve this?

import { useState } from 'react';

export default function Greeting() {
  const [name, setName] = useState('');

  // What should the input's onChange handler be?
  return (
    

      
      
Hello, {name || 'stranger'}!
    
  );
}

hard

A. onChange={e => setName(e.target.value)}

B. onChange={setName(e.target.value)}

C. onChange={() => setName('')}

D. onChange={e => e.target.value}

Solution

1. Step 1: Understand event handler for input changes

   The onChange handler receives an event; to update state, call setName with event target's value.

2. Step 2: Identify correct arrow function syntax

   onChange={e => setName(e.target.value)} correctly defines an arrow function that takes event and calls setName with e.target.value.

3. Final Answer:

   onChange={e => setName(e.target.value)} -> Option A

4. Quick Check:

   Use event parameter to update state from input value [OK]

Hint: Use arrow function with event to update state from input [OK]

Common Mistakes:

• Calling setName immediately instead of in a function
• Not passing event parameter to handler
• Returning value without updating state