Passing arguments to handlers in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you pass an argument to an event handler in React?

You can pass an argument by wrapping the handler call in an arrow function, like onClick={() => handleClick(arg)}. This way, the function runs only when the event happens.

beginner

What happens if you write onClick={handleClick(arg)} directly?

The function handleClick runs immediately during rendering, not when the event happens. This causes unexpected behavior.

beginner

Why use arrow functions to pass arguments in React event handlers?

Arrow functions create a new function that calls your handler with arguments only when the event triggers. This prevents running the handler too early.

intermediate

Can you pass multiple arguments to a React event handler? How?

Yes. Use an arrow function and pass all arguments inside it, like onClick={() => handleClick(arg1, arg2).

intermediate

How do you access the event object along with custom arguments in a React handler?

Use an arrow function that receives the event and passes it along with other arguments: onClick={(e) => handleClick(e, arg)}. The event is the first parameter.

What is the correct way to pass an argument 'id' to a click handler 'handleClick' in React?

A onClick={handleClick}

B onClick={handleClick(id)}

C onClick={() => handleClick(id)}

D onClick={handleClick, id}

Using an arrow function ensures the handler runs only when clicked, passing 'id' as argument.

What happens if you write onClick={handleClick(id)} in React?

A The handler runs immediately during render

B The handler runs only on click

C The handler never runs

D It causes a syntax error

Writing it this way calls the function immediately instead of on the event.

How do you pass both the event and a custom argument to a handler?

A onClick={(e) => handleClick(e, arg)}

B onClick={handleClick(e, arg)}

C onClick={handleClick(arg, e)}

D onClick={handleClick}

The arrow function receives the event and passes it along with the argument.

Which of these is NOT a reason to use arrow functions for passing arguments in handlers?

A To delay function execution until event triggers

B To immediately call the function during render

C To access the event object with custom arguments

D To pass multiple arguments easily

Arrow functions prevent immediate calls; immediate calls are usually a mistake.

Can you pass multiple arguments to a React event handler?

A No, only one argument is allowed

B No, React does not support arguments in handlers

C Yes, by separating arguments with commas in JSX

D Yes, by wrapping the call in an arrow function

Multiple arguments can be passed using an arrow function wrapper.

Explain how to pass a custom argument and the event object to a React event handler.

Think about how to keep the event and add your own data.

Describe why calling a handler directly with arguments in JSX causes problems.

Consider when the function should run.

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