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.

Practice

1. What is the correct way to pass an argument id to a click handler in React without calling the function immediately?

easy

A. onClick={handleClick.bind(id)}

B. onClick={() => handleClick(id)}

C. onClick={handleClick}

D. onClick={handleClick(id)}

Solution

1. Step 1: Understand function call vs function reference

   Using handleClick(id) calls the function immediately, which is not desired on render.

2. Step 2: Use arrow function to delay call

   Wrapping the call in an arrow function () => handleClick(id) passes a function reference that calls handleClick with id only when clicked.

3. Final Answer:

   onClick={() => handleClick(id)} -> Option B

4. Quick Check:

   Use arrow function to pass argument without immediate call [OK]

Hint: Wrap call in arrow function to pass args without running [OK]

Common Mistakes:

• Calling function directly in JSX causing immediate execution
• Using bind incorrectly without context
• Passing function reference without arguments

2. Which of the following is the correct syntax to pass multiple arguments event and id to a handler handleClick in React?

easy

A. onClick={handleClick(event, id)}

B. onClick={() => handleClick(event, id)}

C. onClick={handleClick.bind(id, event)}

D. onClick={(event) => handleClick(event, id)}

Solution

1. Step 1: Recognize event parameter handling

   The event object is passed automatically by React to the event handler, so it must be received as a parameter.

2. Step 2: Use arrow function to pass extra argument

   Using (event) => handleClick(event, id) correctly receives the event and passes both event and id to the handler.

3. Final Answer:

   onClick={(event) => handleClick(event, id)} -> Option D

4. Quick Check:

   Arrow function with event param passes multiple args correctly [OK]

Hint: Use arrow with event param to pass event plus extra args [OK]

Common Mistakes:

• Calling handler directly causing immediate execution
• Using bind with wrong argument order
• Ignoring event parameter in arrow function

3. Given the code below, what will be logged when the button is clicked?

function MyButton() {
  const handleClick = (id) => {
    console.log('Clicked id:', id);
  };
  return <button onClick={() => handleClick(5)}>Click me</button>;
}

medium

A. Clicked id: 5

B. Clicked id: undefined

C. Clicked id: () => handleClick(5)

D. Nothing is logged

Solution

1. Step 1: Understand the arrow function usage in onClick

   The onClick uses an arrow function that calls handleClick(5) when clicked, passing 5 as argument.

2. Step 2: Check what handleClick logs

   handleClick logs the string plus the passed id, so it logs 'Clicked id: 5'.

3. Final Answer:

   Clicked id: 5 -> Option A

4. Quick Check:

   Arrow function calls handler with 5, logs 'Clicked id: 5' [OK]

Hint: Arrow function calls handler with argument on click [OK]

Common Mistakes:

• Expecting immediate log on render
• Confusing function reference with function call
• Ignoring argument passed inside arrow function

4. Identify the error in this React code snippet:

function ListItem({ id }) {
  return <li onClick={handleClick(id)}>Item {id}</li>;
  function handleClick(id) {
    alert('Clicked ' + id);
  }
}

medium

A. The alert syntax is incorrect

B. handleClick is not defined inside the component

C. handleClick is called immediately during render, not on click

D. The onClick attribute should be on a button, not li

Solution

1. Step 1: Check how onClick is assigned

   Using onClick={handleClick(id)} calls handleClick immediately during render, which is wrong.

2. Step 2: Correct way to assign onClick

   It should be wrapped in a function like onClick={() => handleClick(id)} to call on user click.

3. Final Answer:

   handleClick is called immediately during render, not on click -> Option C

4. Quick Check:

   Direct call in JSX runs function immediately, must wrap in arrow [OK]

Hint: Wrap handler call in arrow to avoid immediate execution [OK]

Common Mistakes:

• Calling handler directly in JSX
• Misplacing function definition
• Thinking alert syntax is wrong

5. You want to create a list of buttons that alert their own index when clicked. Which code correctly passes the index to the handler without causing all alerts on render?

const List = () => {
  const handleClick = (index) => alert(`Button ${index} clicked`);
  return (
    <div>
      {[0,1,2].map((i) => (
        <button key={i} onClick={/* ??? */}>Button {i}</button>
      ))}
    </div>
  );
};

hard

A. onClick={() => handleClick(i)}

B. onClick={handleClick(i)}

C. onClick={handleClick}

D. onClick={handleClick.bind(i)}

Solution

1. Step 1: Avoid immediate call in map

   Using handleClick(i) calls the function immediately during render, causing all alerts at once.

2. Step 2: Use arrow function to pass index on click

   Wrapping in () => handleClick(i) delays the call until the button is clicked, passing the correct index.

3. Final Answer:

   onClick={() => handleClick(i)} -> Option A

4. Quick Check:

   Arrow function passes index on click, prevents immediate call [OK]

Hint: Use arrow function in map to pass index without immediate call [OK]

Common Mistakes:

• Calling handler directly in map causing immediate alerts
• Passing handler without arguments losing index info
• Using bind with incorrect context