Passing functions through props is an important concept in React that allows a parent component to share a function with a child component. The child component can call that function to perform an action, such as responding to a button click, submitting a form, updating data, or communicating an event back to the parent.
In React, functions can be passed as props just like strings, numbers, arrays, and objects. This technique helps developers create reusable components and manage interactions between components.
Course: JustAcademy React JS Training Course
Course Demo: Register for React JS Course Demo
A function is a reusable block of code designed to perform a specific task. A function can accept parameters, execute instructions, and optionally return a value.
function greet() {
console.log("Hello, React!");
}
greet();Output:
Hello, React!In this example, the greet() function displays a message when it is called.
function greetUser(name) {
console.log("Hello, " + name);
}
greetUser("Amit");Output:
Hello, AmitFunctions become especially useful in React when a parent component passes a function to a child component through props.
Passing functions through props means sending a function from one component to another as a prop. The receiving component can call the function when a particular action occurs.
For example, a parent component may define a function named handleClick and pass it to a child component. The child component can call that function when a user clicks a button.
<ChildComponent onAction={handleAction} />In this syntax:
ChildComponent is the component receiving the function.onAction is the prop used to pass the function.handleAction is the function defined in the parent component.Important: Functions are passed using curly braces in JSX because they are JavaScript values.
Passing functions through props helps components communicate and allows the parent component to control behavior while the child component handles the user interface.
In this example, the parent component defines a function and passes it to the child component. The child calls the function when the button is clicked.
function Child({ onClick }) {
return (
<button onClick={onClick}>
Click Me
</button>
);
}
function App() {
function handleClick() {
alert("Button clicked!");
}
return <Child onClick={handleClick} />;
}
export default App;Expected behavior: When the user clicks the button, an alert displays "Button clicked!"
Explanation:
handleClick().onClick prop.onClick prop.onClick={onClick} to call the function after a click.A common React pattern is to define a function in a parent component and pass it to a child component. The child then invokes the function in response to an event.
function Child({ showMessage }) {
return (
<button onClick={showMessage}>
Show Message
</button>
);
}
function App() {
function displayMessage() {
alert("Welcome to React JS!");
}
return <Child showMessage={displayMessage} />;
}
export default App;Expected behavior: Clicking the button displays the welcome message.
Here, showMessage is the prop name used by the child, while displayMessage is the actual function defined by the parent. The prop name and function name do not have to match.
Sometimes a function needs to receive a value, such as a student's name, product ID, or item number. You can pass a function through props and use an arrow function to supply the required argument when the event occurs.
function GreetingButton({ onGreet }) {
return (
<button onClick={() => onGreet("Rahul")}>
Greet Rahul
</button>
);
}
function App() {
function greetUser(name) {
alert("Hello, " + name + "!");
}
return <GreetingButton onGreet={greetUser} />;
}
export default App;Expected behavior: Clicking the button displays "Hello, Rahul!"
Explanation:
greetUser(name).onGreet={greetUser}.onGreet("Rahul").name parameter.The arrow function ensures the callback is invoked when the user clicks, rather than immediately during rendering.
A component can receive multiple functions through different props. This is useful when a child component needs to support multiple actions.
function ActionButtons({ onSave, onCancel }) {
return (
<div>
<button onClick={onSave}>Save</button>
<button onClick={onCancel}>Cancel</button>
</div>
);
}
function App() {
function saveData() {
alert("Data saved successfully!");
}
function cancelAction() {
alert("Action cancelled!");
}
return (
<ActionButtons
onSave={saveData}
onCancel={cancelAction}
/>
);
}
export default App;Expected behavior:
This example demonstrates how one reusable child component can support different actions supplied by its parent.
One of the most common uses of function props is allowing a child component to request a state update in its parent. The parent owns the state and passes a callback to the child.
import { useState } from "react";
function CounterButtons({ onIncrement, onDecrement }) {
return (
<div>
<button onClick={onIncrement}>Increase</button>
<button onClick={onDecrement}>Decrease</button>
</div>
);
}
function App() {
const [count, setCount] = useState(0);
function increment() {
setCount((previousCount) => previousCount + 1);
}
function decrement() {
setCount((previousCount) => previousCount - 1);
}
return (
<div>
<h2>Count: {count}</h2>
<CounterButtons
onIncrement={increment}
onDecrement={decrement}
/>
</div>
);
}
export default App;Expected behavior:
Explanation: The parent component owns the count state. It passes the increment and decrement functions to the child. When the child invokes either function, the parent's state changes and React renders the updated count.
Reusable components focus on how something looks, while the parent provides the action the component should perform. This approach allows the same component to be reused in different situations.
function Button({ label, onClick }) {
return (
<button onClick={onClick}>
{label}
</button>
);
}
function App() {
function handleLogin() {
alert("Login button clicked!");
}
function handleRegister() {
alert("Register button clicked!");
}
return (
<div>
<Button label="Login" onClick={handleLogin} />
<Button label="Register" onClick={handleRegister} />
</div>
);
}
export default App;Explanation:
Button component receives a label and a callback.handleLogin.handleRegister.Function props are useful when a child component contains a form but the parent component needs to handle the submitted data.
function LoginForm({ onLogin }) {
function handleSubmit(event) {
event.preventDefault();
onLogin("[email protected]");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Login</button>
</form>
);
}
function App() {
function handleLogin(email) {
alert("Login submitted for " + email);
}
return <LoginForm onLogin={handleLogin} />;
}
export default App;Expected behavior: Submitting the form displays "Login submitted for [email protected]".
Explanation:
event.preventDefault() prevents the browser's default form submission behavior.onLogin callback with an email value.This is a simplified demonstration. A real login form should collect input from the user and use appropriate authentication and validation.
A parent can pass a function to a child that represents a list item. This allows the child to notify the parent when a particular item is selected or deleted.
function Product({ product, onSelect }) {
return (
<div>
<h3>{product.name}</h3>
<button onClick={() => onSelect(product.id)}>
Select Product
</button>
</div>
);
}
function App() {
const products = [
{ id: 1, name: "Laptop" },
{ id: 2, name: "Keyboard" }
];
function handleSelect(productId) {
alert("Selected product ID: " + productId);
}
return (
<div>
{products.map((product) => (
<Product
key={product.id}
product={product}
onSelect={handleSelect}
/>
))}
</div>
);
}
export default App;Expected behavior: Clicking Select Product displays the ID of the selected product.
The child calls the parent-provided callback with a product ID. The parent can then use that ID to select, update, or delete the appropriate item.
React props can carry either data or behavior. Understanding the difference helps you design clear component interfaces.
| Feature | Data Props | Function Props |
|---|---|---|
| Purpose | Pass information | Pass behavior or callbacks |
| Examples | name, age, title, price | onClick, onSave, onDelete |
| Typical values | Strings, numbers, arrays, objects | JavaScript functions |
| Usage | Display or process received information | Invoke an action when needed |
| Example | name="Amit" |
onClick={handleClick} |
Clear function and prop names make React components easier to understand and maintain.
handleClick: a function that handles a click event.handleSubmit: a function that handles form submission.handleDelete: a function that handles a delete action.onClick: a common prop name for a click callback.onSubmit: a common prop name for a submission callback.onDelete: a custom prop name for a deletion callback.By convention, event-handler functions often start with handle, while callback props often start with on. These are naming conventions rather than strict requirements for custom components.
One of the most common mistakes in React is calling a function when you intend to pass it as a callback.
<button onClick={handleClick}>
Click Me
</button>React receives the function and invokes it when the button is clicked.
<button onClick={handleClick()}>
Click Me
</button>This calls handleClick() during rendering instead of waiting for a click. Its return value is then supplied to onClick.
<button onClick={() => handleClick(10)}>
Send Value
</button>The arrow function delays the call until the click event occurs.
<Child onClick="handleClick" />This passes a string instead of the function. Use onClick={handleClick}.
<Child onAction={handleAction()} />This calls the function immediately. If the child is expected to call it later, use onAction={handleAction}.
function Child({ onSave }) {
return <button onClick={onClick}>Save</button>;
}The component receives onSave but tries to use onClick, which is not defined in this component. Use the received prop consistently:
function Child({ onSave }) {
return <button onClick={onSave}>Save</button>;
}If a component expects a callback but the parent does not provide one, attempting to call it may cause an error. Make sure the parent passes the expected function or provide an appropriate fallback when the callback is optional.
For actions such as clicking, prefer a semantic HTML button instead of a generic element. Buttons provide built-in keyboard accessibility and expected browser behavior.
onSave, onDelete, and onSelect.Build a small application where a child component contains a button and sends a message to the parent through a function prop.
import { useState } from "react";
function MessageButton({ onSendMessage }) {
return (
<button onClick={() => onSendMessage("Hello from Child!")}>
Send Message
</button>
);
}
function App() {
const [message, setMessage] = useState("No message received yet.");
function handleMessage(messageFromChild) {
setMessage(messageFromChild);
}
return (
<div>
<h2>Parent Component</h2>
<p>Message: {message}</p>
<MessageButton onSendMessage={handleMessage} />
</div>
);
}
export default App;Expected behavior:
onSendMessage.Learning outcomes:
Answer: It means passing a JavaScript function from one component to another through props so that the receiving component can invoke it when needed.
Answer: It allows a child component to trigger behavior defined by the parent, including state updates and other actions.
Answer: Define the function in the parent and pass it using JSX curly braces, such as
onClick={handleClick} and onClick={handleClick()}?Answer: The first passes the function reference for later execution. The second calls the function immediately during rendering.
Answer: Use an arrow function, such as onClick={() => onSelect(5)}.
Answer: Yes. The parent can pass a callback that uses a state setter. The child calls the callback to request an update.
Answer: Yes. A component can receive multiple callbacks, such as onSave, onCancel, and onDelete.
Answer: Callback props commonly start with on, such as onSubmit or onDelete. Handler functions often start with handle.
Answer: A reusable component is designed to work in multiple places, often accepting props to customize its content and behavior.
Answer: It supports component communication, event handling, reusable UI, and a clear separation between presentation and application logic.
onClick callback.onSelect callback with its product ID.Passing functions through props allows React components to communicate and respond to user interactions. A parent can define a function and pass it to a child, which can invoke it when an event occurs. This technique is useful for reusable components, form handling, list operations, and updating parent state.
To continue learning React, explore the JustAcademy React JS Training Course or register for a course demo.
