React – How to Pass Function as Prop

In React, one of the key concepts is passing data or functionality between components. A common use case is to pass a function as a prop from a parent component to a child component. This allows the child component to call the function and communicate back to the parent or trigger some parent-side logic.

In this React tutorial, we will guide you through the process of passing a function as prop (property) from one component to another, with detailed explanations and examples.

By the end of this tutorial, you will understand how to:

  • Pass a function as a prop from a parent to a child component
  • Invoke the function inside the child component
  • Handle data transfer from the child component back to the parent

Steps to Pass Function as Prop

To pass a function as a prop,

  1. You first define the function in the parent component.
  2. Then, include the function as a prop in the child component’s JSX.
  3. In the child component, access the function via props and invoke it when needed, optionally passing arguments to it.

Example 1: Passing a Function to Handle a Button Click

In this example, we have two components Parent, and Child. Parent is defined in App.js, and Child is defined in Child.js.

We shall demonstrate how to pass a function as a prop, from Parent to Child, to handle a button click event in the Child component.

Filename: App.js


import React from 'react';
import Child from './Child';

const Parent = () => {
  const handleButtonClick = () => {
    alert('Button clicked in Child Component!');
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <Child onButtonClick={handleButtonClick} />
    </div>
  );
};

export default Parent;

Filename: Child.js


import React from 'react';

const Child = ({ onButtonClick }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={onButtonClick}>Click Me</button>
    </div>
  );
};

export default Child;

Explanation:

  • In the Parent component, we define a function handleButtonClick that shows an alert when invoked.
  • This function is passed to the Child component as a prop named onButtonClick.
  • In the Child component, the function is accessed via the onButtonClick prop and is assigned to the onClick event of a button.
  • When the button in the Child component is clicked, the handleButtonClick function in the parent is executed, showing the alert.

Output

Example 2: Passing a Function to Receive Data from Child

This example demonstrates how to pass a function to the child component that sends data back to the parent.

Filename: App.js


import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [message, setMessage] = useState('');

  const handleChildData = (data) => {
    setMessage(data);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from Child: {message}</p>
      <Child sendData={handleChildData} />
    </div>
  );
};

export default Parent;

Filename: Child.js


import React from 'react';

const Child = ({ sendData }) => {
  const sendDataToParent = () => {
    sendData('Hello from Child!');
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={sendDataToParent}>Send Data</button>
    </div>
  );
};

export default Child;

Explanation:

  • In the Parent component, a function handleChildData is defined to receive data from the child and update the parent’s state.
  • This function is passed to the Child component as a prop named sendData.
  • In the Child component, the sendDataToParent function calls sendData with a string argument.
  • When the button in the Child component is clicked, the parent’s state is updated with the message from the child, which is then displayed in the parent component.

Output

Conclusion

In this tutorial, you learned how to pass functions as props in React. Passing functions allows child components to communicate with parent components or trigger parent-side logic. Using the first example, you can handle events in the child component, and in the second example, you saw how to transfer data from the child back to the parent.