Passing arguments to handlers in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when clicking the button?

Consider this React component. What will be logged to the console when the button is clicked?

React

import React, { useState } from 'react';

function ClickLogger() {
  const [count, setCount] = useState(0);

  function handleClick(value) {
    console.log(`Clicked with value: ${value}`);
    setCount(count + value);
  }

  return (
    <button onClick={() => handleClick(5)}>
      Click me
    </button>
  );
}

export default ClickLogger;

A Logs 'Clicked with value: 5' and updates count to 5

B Logs 'Clicked with value: 0' and updates count to 0

C Throws a TypeError because handleClick is called incorrectly

D Logs 'Clicked with value: undefined' and count remains 0

💡 Hint

Look at how the argument is passed inside the onClick handler.

The arrow function () => handleClick(5) calls handleClick with the argument 5 when the button is clicked. This logs the message and updates the state count to 5.

📝 Syntax

intermediate

Which option correctly passes an argument to the event handler?

Which of the following is the correct way to pass the argument 10 to the handleClick function in React?

React

function MyComponent() {
  function handleClick(num) {
    console.log(num);
  }

  return (
    <button /* choose correct onClick here */>
      Press
    </button>
  );
}

A <button onClick={() => handleClick(10)}>Press</button>

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

C <button onClick={handleClick}>Press</button>

D <button onClick={handleClick.bind(null, 10)}>Press</button>

💡 Hint

Remember that calling the function directly in JSX runs it immediately.

Option A uses an arrow function to delay calling handleClick(10) until the button is clicked. Option A calls it immediately on render. Option A passes the function without arguments. Option A incorrectly uses bind.

🔧 Debug

advanced

Why does this code cause an error when clicking the button?

Examine the code below. Clicking the button causes an error. What is the cause?

React

import React from 'react';

function Counter() {
  let count = 0;

  function increment(step) {
    count += step;
    console.log(count);
  }

  return (
    <button onClick={increment(1)}>
      Add 1
    </button>
  );
}

export default Counter;

A The button lacks an event parameter in the handler, causing a TypeError

B The count variable is not a state, so React cannot update the UI

C increment is not bound to the component, causing 'this' to be undefined

D The onClick calls increment immediately on render, causing an error

💡 Hint

Check when the function inside onClick is executed.

Because increment(1) is called immediately during render, React tries to assign the result (undefined) to onClick, causing an error. It should be wrapped in a function to delay execution.

❓ state_output

advanced

What is the value of count after clicking the button twice?

Given this React component, what will be the value of count after clicking the button two times?

React

import React, { useState } from 'react';

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

  function increment(step) {
    setCount(count + step);
  }

  return (
    <button onClick={() => increment(1)}>
      Increment
    </button>
  );
}

export default Counter;

A NaN

B 1

C 2

D 0

💡 Hint

Remember how React batches state updates and closures capture values.

The increment function uses the current count value from closure, which does not update immediately. Each click adds 1 to the initial 0, so after two clicks, count is 1, not 2.

🧠 Conceptual

expert

Why use an arrow function to pass arguments to event handlers in React?

Which explanation best describes why we often use arrow functions like () => handleClick(arg) when passing arguments to event handlers?

A To convert the handler into a pure function without side effects

B Because React requires all event handlers to be arrow functions for binding

C To prevent the handler from running immediately during render and instead run it only on the event trigger

D To automatically bind the handler to the component's <code>this</code> context

💡 Hint

Think about when the function should run in React.

Using an arrow function delays the call until the event happens. Without it, the function runs immediately during rendering, which is not desired.