Event Handlers and Parameter Passing

🎯 Event Handlers and Parameter Passing in React

Handling events in React is a core skill — whether you're responding to a button click, capturing input, or triggering custom logic. But what happens when you need to pass custom data or parameters to your event handler?

In this guide, we’ll break down how event handlers work in React and the best ways to pass parameters into them cleanly and efficiently. 🧠

⚙️ React Event Handling Basics

React uses a camelCase syntax for events like onClick, onChange, and onSubmit. You typically pass a function reference directly:

const handleClick = () => {
  alert("Button clicked!");
};

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

So far, so good. But what if you need to pass an argument?

📦 Passing Parameters to Event Handlers

To pass parameters, wrap your handler in an inline arrow function. This allows you to call the handler with arguments at the right time — when the event occurs:

const greetUser = (name) => {
  alert(`Hello, ${name}!`);
};

<button onClick={() => greetUser("Aditya")}>Greet</button>

This ensures the function runs only when the button is clicked — not during initial render.

⚠️ Common Mistake to Avoid

// ❌ This will run immediately when the component renders!
<button onClick={greetUser("Aditya")}>Greet</button>

Always remember to wrap your call in an anonymous function to defer execution until the event occurs.

📨 Accessing the Event Object with Parameters

If you also need the event object (e.g., to prevent default behavior), just include it as the second argument:

const handleSubmit = (userId, e) => {
  e.preventDefault();
  console.log("Submitting for user:", userId);
};

<form onSubmit={(e) => handleSubmit(42, e)}>
  <button type="submit">Submit</button>
</form>

React will pass the synthetic event object as the last parameter in your inline function.

🧩 Mapping with Parameters in Loops

In lists, you often pass IDs or indexes inside map() loops:

const items = ["Apple", "Banana", "Cherry"];

const handleDelete = (index) => {
  console.log(`Deleting item at index: ${index}`);
};

<ul>
  {items.map((item, i) => (
    <li key={i}>
      {item} <button onClick={() => handleDelete(i)}>Remove</button>
    </li>
  ))}
</ul>

✅ This pattern is common for dynamic UIs like to-do lists or admin tables.

📋 Class Component Syntax

In class components, you'll need to bind methods in the constructor (or use class fields with arrow functions):

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello(name) {
    alert(`Hello, ${name}`);
  }

  render() {
    return (
      <button onClick={() => this.sayHello("Aditya")}>Say Hi</button>
    );
  }
}

Arrow functions (in modern class syntax) can avoid the need for manual binding.

📌 Best Practices

• ✅ Use arrow functions to pass arguments safely
• ✅ Avoid defining new functions inside render() in performance-critical apps
• ✅ Destructure event in handlers if you're using multiple parameters
• ✅ Keep handler logic clean and reusable

🧠 Recap: Event Handler Patterns

• Pass arguments with inline arrow functions: () => handler(arg)
• Access event object as the second parameter
• Don’t invoke functions directly in JSX — it will run on render
• In loops, pass item index or ID with map()

Mastering event handler patterns unlocks full control of dynamic interactivity in React. Whether it's updating state, validating input, or triggering animations — you now know how to pass data into your handlers cleanly. 🔧

🚀 What's Next?

• Explore controlled vs uncontrolled inputs in forms
• Learn about React’s form validation techniques
• Dive deeper into performance optimization for events

React’s event system gives you power and precision — now you know how to steer it like a pro! ⚡