Handling events in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this React component. What will be the displayed text after clicking the button once?

React

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default ClickCounter;

A The button click causes a syntax error.

B The text remains 'You clicked 0 times'.

C The text changes to 'You clicked 1 times'.

D The text changes to 'You clicked NaN times'.

💡 Hint

Think about how useState updates the count when the button is clicked.

Clicking the button triggers the onClick handler, which calls setCount with count + 1. This updates the state from 0 to 1, so the displayed text updates accordingly.

📝 Syntax

intermediate

Which option correctly attaches an event handler in React?

You want to run a function named handleClick when a button is clicked. Which JSX syntax is correct?

A <button onClick={handleClick}>Click</button>

B <button onClick={handleClick()}>Click</button>

C <button onclick={handleClick}>Click</button>

D <button OnClick={handleClick}>Click</button>

💡 Hint

React event handlers are camelCase and expect a function reference, not a function call.

In React, event handlers use camelCase like onClick. You pass the function itself, not the result of calling it. So onClick={handleClick} is correct.

🔧 Debug

advanced

Why does this event handler cause an error?

This React component throws an error when clicking the button. What is the cause?

React

import React from 'react';

function MyButton() {
  function handleClick() {
    console.log(this);
  }
  return <button onClick={handleClick}>Click me</button>;
}

export default MyButton;

A The component is missing a return statement.

B 'this' is undefined inside handleClick because it is a regular function, not bound to the component.

C handleClick is called immediately instead of on click, causing an error.

D The onClick attribute is misspelled causing the handler not to run.

💡 Hint

Consider how 'this' behaves in JavaScript functions inside React components.

In React functional components, 'this' is not bound automatically. Using a regular function for handleClick means 'this' is undefined inside it, causing errors if accessed.

❓ state_output

advanced

What is the output after clicking the button twice quickly?

Examine this React component. What will be the final count displayed after clicking the button twice quickly?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
    setCount(count + 1);
  }
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

A Count will be 1 after two quick clicks.

B Count will be 2 after two quick clicks.

C Count will be 4 after two quick clicks.

D Count will be 0 after two quick clicks.

💡 Hint

Think about how React batches state updates and the value of 'count' inside increment.

Both setCount calls use the same stale 'count' value, so each sets count to 1. Two quick clicks call increment twice, each setting count to 1, so final count is 1.

🧠 Conceptual

expert

Why use event delegation in React event handling?

React uses a synthetic event system that attaches a single event listener at the root. What is the main benefit of this event delegation approach?

A It disables event bubbling to avoid unwanted side effects.

B It allows direct access to native DOM events without any abstraction.

C It forces all events to be handled synchronously, preventing delays.

D It improves performance by reducing the number of event listeners attached to DOM nodes.

💡 Hint

Think about how many event listeners would be needed if each element had its own listener.

React's synthetic event system attaches one listener at the root and delegates events, reducing memory use and improving performance compared to attaching listeners to many elements.