Passing Arguments to Event Handlers is an important concept in React JS. It allows developers to send specific values, such as an item ID, username, product name, or index, to a function when a user performs an action like clicking a button. It is commonly used in delete buttons, edit actions, product lists, shopping carts, and other interactive applications.
Course: JustAcademy React JS Training Course
Course Demo: Register for React JS Course Demo
An event handler is a JavaScript function that runs when a particular event occurs. Events can include clicking a button, typing into an input, submitting a form, or moving the mouse over an element.
React event handlers are assigned through JSX props such as onClick, onChange, and onSubmit. Event handler names use camelCase, and the handler is passed as a function.
function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<button onClick={handleClick}>
Click Me
</button>
);
}
export default App;Explanation: The handleClick function runs when the user clicks the button. React receives the function reference and invokes it when the event occurs.
Passing arguments means providing values to a function when an event occurs. These values allow the handler to perform a specific action based on the selected item or user interaction.
function App() {
function greetUser(name) {
alert("Hello, " + name);
}
return (
<button onClick={() => greetUser("Rahul")}>
Greet User
</button>
);
}
export default App;Output: When the user clicks the button, an alert displays Hello, Rahul.
Explanation: The arrow function delays the call to greetUser until the click happens and passes "Rahul" as the argument.
| Application | Argument | Purpose |
|---|---|---|
| Todo application | Task ID | Delete or update a task |
| E-commerce website | Product ID | Add a product to the cart |
| User management | User ID | Edit or remove a user |
| Student management | Student name or ID | Display student details |
| Image gallery | Image index | Display a selected image |
The most common way to pass an argument to a React event handler is to wrap the function call in an arrow function.
<button onClick={() => handleFunction(argument)}>
Click Me
</button>function App() {
function showMessage(message) {
alert(message);
}
return (
<div>
<button onClick={() => showMessage("Welcome to React")}>
Show Message
</button>
<button onClick={() => showMessage("React is easy to learn")}>
Learn React
</button>
</div>
);
}
export default App;Explanation: Both buttons call the same function but pass different arguments. The first displays Welcome to React, and the second displays React is easy to learn.
A string argument is used when a handler needs text, such as a name, message, category, or action label.
function App() {
function displayCourse(courseName) {
alert("Selected course: " + courseName);
}
return (
<button onClick={() => displayCourse("React JS")}>
Select Course
</button>
);
}
export default App;Output: Selected course: React JS
Numbers can be passed to event handlers for calculations, quantity updates, pagination, and other numeric operations.
function App() {
function showNumber(number) {
alert("Selected number: " + number);
}
return (
<button onClick={() => showNumber(100)}>
Show Number
</button>
);
}
export default App;Output: Selected number: 100
You can pass two or more arguments to an event handler by including them in the function call inside the arrow function.
function App() {
function showDetails(name, age) {
alert("Name: " + name + ", Age: " + age);
}
return (
<button onClick={() => showDetails("Amit", 22)}>
Show Details
</button>
);
}
export default App;Output: Name: Amit, Age: 22
Explanation: The string "Amit" is passed as the first argument, and the number 22 is passed as the second argument.
React passes an event object to the event handler when the event occurs. The event object provides information about the interaction, including the event type and the element that triggered it.
When you need both a custom argument and the event object, explicitly pass the event object from the arrow function.
function App() {
function handleClick(name, event) {
console.log("Name:", name);
console.log("Event type:", event.type);
}
return (
<button onClick={(event) => handleClick("Priya", event)}>
Click Me
</button>
);
}
export default App;Explanation: The first argument is "Priya", and the second argument is the click event object. The event object's type property will typically be click.
Important: When using an arrow function, pass the event object explicitly if your handler needs it.
In React, lists are commonly rendered using the map() method. Each list item can have a button that passes its own data to an event handler.
function App() {
const students = [
{ id: 1, name: "Amit" },
{ id: 2, name: "Priya" },
{ id: 3, name: "Rahul" }
];
function showStudent(name) {
alert("Selected student: " + name);
}
return (
<div>
<h2>Student List</h2>
{students.map((student) => (
<div key={student.id}>
<span>{student.name}</span>
<button onClick={() => showStudent(student.name)}>
View
</button>
</div>
))}
</div>
);
}
export default App;Explanation: Each button passes the name of its own student to showStudent(). The key prop helps React identify each list item during rendering.
A common real-world use case is deleting a specific item by passing its unique ID to a handler.
import { useState } from "react";
function App() {
const [items, setItems] = useState([
{ id: 1, name: "HTML" },
{ id: 2, name: "CSS" },
{ id: 3, name: "React" }
]);
function deleteItem(id) {
setItems((currentItems) =>
currentItems.filter((item) => item.id !== id)
);
}
return (
<div>
<h2>Course List</h2>
{items.map((item) => (
<div key={item.id}>
<span>{item.name}</span>
<button onClick={() => deleteItem(item.id)}>
Delete
</button>
</div>
))}
</div>
);
}
export default App;Explanation: When the user clicks Delete, the selected item's ID is passed to deleteItem(). The filter() method creates a new array that excludes that item, and the state update causes React to render the updated list.
Arguments can determine how state changes. For example, a counter can increase or decrease depending on the argument passed to a handler.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
function updateCount(value) {
setCount((currentCount) => currentCount + value);
}
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => updateCount(1)}>
Increase
</button>
<button onClick={() => updateCount(-1)}>
Decrease
</button>
</div>
);
}
export default App;Explanation: The Increase button passes 1, while the Decrease button passes -1. The updater function calculates the new count from the previous state.
JavaScript's bind() method can create a new function with arguments already supplied. It is another way to pass arguments to event handlers, although arrow functions are generally easier to read in modern React function components.
<button onClick={handleClick.bind(null, argument)}>
Click Me
</button>function App() {
function showName(name) {
alert("Hello, " + name);
}
return (
<button onClick={showName.bind(null, "Neha")}>
Show Name
</button>
);
}
export default App;Explanation: bind(null, "Neha") creates a function that supplies "Neha" as the first argument when the button is clicked. In a function component, this approach is usually less straightforward than using an arrow function.
This is one of the most important concepts in React event handling.
| Code | Meaning |
|---|---|
onClick={handleClick} |
Passes the function; React calls it when the event occurs. |
onClick={() => handleClick("Amit")} |
Passes a new function that calls the handler with an argument when clicked. |
onClick={handleClick("Amit")} |
Calls the function during rendering instead of waiting for the click; usually incorrect. |
onClick={() => alert("Hello")} |
Runs the alert when the button is clicked. |
onClick={alert("Hello")} |
Calls the alert during rendering; incorrect for normal click handling. |
Remember: Pass a function to the event prop. When arguments are required, use an arrow function or another function wrapper.
A parent component can define a function and pass it to a child component through props. The child can then call that function with a particular argument.
function Child({ onSelect }) {
return (
<button onClick={() => onSelect("React JS")}>
Select React
</button>
);
}
function App() {
function handleSelection(course) {
alert("Selected course: " + course);
}
return <Child onSelect={handleSelection} />;
}
export default App;Explanation: The parent defines handleSelection() and passes it as the onSelect prop. The child invokes that function with "React JS" when the button is clicked.
The same approach works with other event handlers, not only onClick.
function App() {
function handleRoleChange(role, event) {
console.log("Selected role:", role);
console.log("Input value:", event.target.value);
}
return (
<select onChange={(event) => handleRoleChange("Developer", event)}>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</select>
);
}
export default App;Explanation: When the selection changes, the handler receives the custom role argument and the event object. In this example, the role label is fixed, while event.target.value provides the selected option value.
| Feature | Arrow Function | bind() |
|---|---|---|
| Example | onClick={() => deleteItem(id)} |
onClick={deleteItem.bind(null, id)} |
| Readability | Usually easy to understand | May be less clear to beginners |
| Custom arguments | Passed directly in the function call | Preconfigured when creating the bound function |
| Event object | Pass it explicitly if required | Additional event arguments are supplied after bound arguments |
| Common use | Modern function components | Useful in some callback and class-component patterns |
Recommendation: Prefer arrow functions for most simple argument-passing tasks in React function components.
// Incorrect
<button onClick={deleteItem(5)}>Delete</button>
// Correct
<button onClick={() => deleteItem(5)}>Delete</button>The incorrect version calls deleteItem(5) during rendering. The correct version waits for the click.
// Incorrect when deleteItem requires an ID
<button onClick={deleteItem}>Delete</button>
// Correct
<button onClick={() => deleteItem(item.id)}>Delete</button>The first version passes no custom ID. It is valid only if the handler is designed to work without one.
// Custom argument and event object
<button onClick={(event) => handleClick(item.id, event)}>
Select
</button>The handler receives the item ID first and the event object second because the arrow function passes them in that order.
When items can be added, removed, or reordered, prefer a stable unique ID instead of relying on an array index to identify a record.
When deleting or updating list items, create a new array or object and update state with the appropriate setter instead of directly modifying the existing state.
handleDelete, handleEdit, and handleSelect.Objective: Display a list of products and show the selected product's name and price when the user clicks its button.
import { useState } from "react";
function App() {
const [selectedProduct, setSelectedProduct] = useState(null);
const products = [
{ id: 1, name: "Keyboard", price: 1200 },
{ id: 2, name: "Mouse", price: 600 },
{ id: 3, name: "Headphones", price: 1800 }
];
function handleSelectProduct(product) {
setSelectedProduct(product);
}
return (
<div>
<h1>Product List</h1>
{products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>Price: ₹{product.price}</p>
<button onClick={() => handleSelectProduct(product)}>
Select Product
</button>
</div>
))}
{selectedProduct && (
<div>
<h2>Selected Product</h2>
<p>Name: {selectedProduct.name}</p>
<p>Price: ₹{selectedProduct.price}</p>
</div>
)}
</div>
);
}
export default App;products array stores product IDs, names, and prices.map() method displays each product.handleSelectProduct().useState setter stores the selected product.Answer: It means providing values to a function when an event occurs, allowing the function to perform an action using those values.
Answer: Use an arrow function, such as .
Answer: It creates a function that invokes the handler with the required arguments when the event occurs, rather than calling the handler during rendering.
Answer: Yes. For example, onClick={() => handleUser("Amit", 25)} passes two arguments.
Answer: Use onClick={(event) => handleClick(id, event)} and define the handler to accept the arguments in that order.
onClick={handleClick} and onClick={handleClick()}?Answer: The first passes the function reference. The second invokes the function immediately during rendering.
Answer: Yes. For example, onClick={() => handleProduct(product)} passes the product object.
Answer: The bind() method creates a new function with specified arguments and, optionally, a particular this value.
Answer: Each item's data can be passed to its handler, for example, onClick={() => handleDelete(item.id)}.
Answer: Passing a product ID to an add-to-cart function or a task ID to a delete function.
map().bind().Passing Arguments to Event Handlers allows React components to respond to user actions using specific data. The most common approach is to wrap the function call in an arrow function, such as onClick={() => handleDelete(item.id)}. This technique is useful for deleting records, selecting products, updating state, handling lists, and building interactive React applications.
For further learning, explore the JustAcademy React JS Training Course and register for a course demo.
