Event handlers in client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this Next.js client component. What will be the displayed output after clicking the button once?

NextJS

'use client';

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick} aria-label="Increment count">
      Count: {count}
    </button>
  );
}

A The button text changes to 'Count: 1' after one click.

B The button causes a runtime error when clicked.

C The button text changes to 'Count: 0' after one click.

D The button text remains 'Count: 0' even after clicking.

💡 Hint

Remember how useState updates state and triggers re-render.

Clicking the button calls handleClick, which updates the count state by adding 1. This causes the component to re-render and display the updated count.

📝 Syntax

intermediate

Which option correctly attaches an event handler in a Next.js client component?

Select the option that correctly defines a button with an onClick event handler that calls the function doSomething.

NextJS

function doSomething() {
  console.log('Clicked');
}

export default function MyButton() {
  return (
    <button /* event handler here */>Click me</button>
  );
}

A <button onClick={doSomething()}>Click me</button>

B <button onclick="doSomething()">Click me</button>

C <button onClick="doSomething()">Click me</button>

D <button onClick={doSomething}>Click me</button>

💡 Hint

In React and Next.js, event handlers are passed as functions, not strings or function calls.

Option D correctly passes the function doSomething as a reference to onClick. Options B and C use strings which are invalid in JSX. Option D calls the function immediately instead of passing it.

🔧 Debug

advanced

Why does this event handler not update the count?

This Next.js client component does not update the count when the button is clicked. What is the cause?

NextJS

'use client';

import { useState } from 'react';

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

  function handleClick() {
    count = count + 1;
  }

  return (
    <button onClick={handleClick} aria-label="Increment">
      Count: {count}
    </button>
  );
}

A The component is missing 'use client' directive.

B The event handler is not attached correctly to the button.

C Directly modifying the state variable 'count' does not trigger a re-render; use setCount instead.

D The initial state value should be a string, not a number.

💡 Hint

In React, state variables are immutable and must be updated via their setter functions.

State variables like count cannot be changed directly. The function handleClick modifies count directly, which does not cause React to re-render. The correct way is to call setCount(count + 1).

❓ state_output

advanced

What is the output after clicking the button twice quickly?

Given this Next.js client component, what will be the displayed count after clicking the button twice quickly?

NextJS

'use client';

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick} aria-label="Increment">
      Count: {count}
    </button>
  );
}

A Count: 1

B Count: 2

C Count: 0

D Count: 3

💡 Hint

React batches state updates and uses the current state value when calling setState with a value.

Both setCount(count + 1) calls use the same count value (0) because state updates are asynchronous and batched. So the count increments only by 1, not 2.

🧠 Conceptual

expert

Why must Next.js client components use 'use client' for event handlers?

Select the best explanation why event handlers in Next.js require the component to be a client component with the 'use client' directive.

A Because 'use client' automatically optimizes event handlers for server-side rendering.

B Because event handlers require JavaScript to run in the browser, and 'use client' enables client-side rendering and interactivity.

C Because Next.js disables all event handlers by default unless 'use client' is present.

D Because 'use client' allows event handlers to run on the server during initial render.

💡 Hint

Think about where event handlers run and what 'use client' enables.

Event handlers need to run in the browser to respond to user actions. The 'use client' directive tells Next.js to render the component on the client side, enabling JavaScript interactivity. Without it, components are server components and cannot have event handlers.

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