🎯 Event Handlers with Parameters

Often you need to pass custom data to event handlers alongside the event object.

Passing Simple Parameters

function TodoList() {
  const handleDelete = (id) => {
    console.log("Delete todo:", id);
  };

  return (
    <ul>
      <li>
        Task 1
        <button onClick={{() => handleDelete(1)}}>Delete</button>
      </li>
      <li>
        Task 2
        <button onClick={{() => handleDelete(2)}}>Delete</button>
      </li>
    </ul>
  );
}

Passing Both Parameters and Event

function ItemList() {
  const handleClick = (itemId, event) => {
    console.log("Item ID:", itemId);
    console.log("Event:", event.type);
  };

  return (
    <button onClick={{(e) => handleClick(42, e)}}>
      Click Me
    </button>
  );
}

Common Patterns

Pattern 1: Arrow Function Wrapper

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

Pattern 2: Bind with Arguments

onClick={{handleClick.bind(null, id)}}

Multiple Parameters

function GridItem() {
  const handleMove = (row, col, direction) => {
    console.log("Move from", row, col, "to", direction);
  };

  return (
    <div>
      <button onClick={{() => handleMove(1, 2, "left")}}>Left</button>
      <button onClick={{() => handleMove(1, 2, "up")}}>Up</button>
    </div>
  );
}

✅ Key Takeaways

• Use **arrow functions** to pass parameters

• Access **event object** as the last parameter

• **Avoid inline logic** - keep handler logic in the function body

• Use `bind()` for more efficient parameter passing in performance-critical code