When a [React](/courses/reactjs) event handler needs additional data such as an ID, name, or object, you can pass the value through an arrow [function](/javascript/functions-in-javascript). ### Basic Example Suppose a list contains several users: ```jsx const users = [ { id: 1, name: "Asif" }, { id: 2, name: "Sara" } ]; ``` Each delete button needs to know which user should be deleted. ```jsx function UserList() { function handleDelete(userId) { console.log("Delete user:", userId); } return (

{users.map((user) => ( ))}

); } ``` ### Why Use an Arrow Function? Avoid: ```jsx onClick={handleDelete(user.id)} ``` because that calls `handleDelete` immediately during rendering. Instead: ```jsx onClick={() => handleDelete(user.id)} ``` passes a [function](/javascript/functions-in-javascript) that will call `handleDelete` later. ### Passing Multiple Arguments ```jsx ``` Handler: ```jsx function handleUpdate(userId, status) { console.log(userId, status); } ``` ### Accessing Both an Argument and the Event You can receive the event in the arrow function: ```jsx ``` Then: ```jsx function handleDelete(event, userId) { event.stopPropagation(); console.log(userId); } ``` ### Passing the Whole Object You can also pass an object: ```jsx ``` Whether you pass an ID or the whole object depends on what the handler actually needs. ### Interview-Ready Answer Arguments are commonly passed to [React](/courses/reactjs) event handlers using an arrow function, for example `onClick={() => handleDelete(id)}`. The arrow function delays execution until the event occurs. If both custom arguments and the React event object are needed, the event can also be forwarded explicitly.