Event handlers in client components in NextJS - Mini Project: Build & Apply

Event handlers in client components

📖 Scenario: You are building a simple interactive button in a Next.js client component. When the user clicks the button, it should update a message on the page.

🎯 Goal: Create a Next.js client component with a button that changes the displayed message when clicked using event handlers.

📋 What You'll Learn

Use a client component with the directive 'use client'

Create a state variable to hold the message

Add a button with an onClick event handler

Update the message state when the button is clicked

Display the updated message below the button

💡 Why This Matters

🌍 Real World

Interactive buttons with event handlers are common in web apps for user feedback, form submissions, and navigation.

💼 Career

Understanding client components and event handling is essential for building responsive user interfaces in Next.js and React.

1

Set up the client component and initial message state

Create a Next.js client component with the directive 'use client' at the top. Inside the component, create a state variable called message initialized to 'Hello!' using useState.

NextJS

'use client'

import { useState } from 'react'

export default function MessageButton() {
  // Your code here
}

Hint

Remember to add 'use client' at the top and import useState from React.

2

Add a button with an onClick event handler

Inside the MessageButton component, add a <button> element with an onClick attribute. Set the onClick to a function that calls setMessage with the string 'Button clicked!'.

NextJS

'use client'

import { useState } from 'react'

export default function MessageButton() {
  const [message, setMessage] = useState('Hello!')

  // Add a button with onClick event handler below
  
}

Hint

Use an arrow function inside onClick to call setMessage with the new text.

3

Display the message below the button

Modify the returned JSX to include a <p> element below the <button> that displays the current message state.

NextJS

'use client'

import { useState } from 'react'

export default function MessageButton() {
  const [message, setMessage] = useState('Hello!')

  return (
    
       setMessage('Button clicked!')}>Click me
      {/* Display message here */}
    
  )
}

Hint

Use curly braces inside JSX to show the message state.

4

Add accessibility and semantic improvements

Wrap the button and message in a <section> element with an aria-label attribute set to 'Interactive message section' to improve accessibility.

NextJS

'use client'

import { useState } from 'react'

export default function MessageButton() {
  const [message, setMessage] = useState('Hello!')

  // Wrap content in a section with aria-label
  return (
    
  )
}

Hint

Use a semantic <section> and add aria-label for screen readers.

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