How to Pass Function as Prop in React: Simple Guide

In React, you pass a function as a prop by giving it a name in the parent component and assigning the function to that prop using functionName={yourFunction}. The child component then calls it via props.functionName() or props.functionName to trigger the function from the parent.

Syntax

To pass a function as a prop, you write the function in the parent component and pass it to the child component as an attribute. The child receives it in props and can call it like any function.

• Parent: <Child onClick={handleClick} /> passes handleClick function as onClick prop.
• Child: Calls props.onClick() or uses props.onClick as an event handler to run the function.

jsx

function Parent() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <Child onClick={handleClick} />;
}

function Child(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

Example

This example shows a parent component passing a function to a child. When the button in the child is clicked, it calls the parent's function to show an alert.

jsx

import React from 'react';

function Parent() {
  function showMessage() {
    alert('Hello from Parent!');
  }

  return <Child onButtonClick={showMessage} />;
}

function Child({ onButtonClick }) {
  return <button onClick={onButtonClick}>Say Hello</button>;
}

export default Parent;

Output

A button labeled 'Say Hello' appears. Clicking it shows an alert with 'Hello from Parent!'.

Common Pitfalls

Common mistakes include:

• Calling the function when passing it, like onClick={handleClick()}, which runs it immediately instead of passing it.
• Not binding this in class components (legacy approach).
• Forgetting to use parentheses when calling the function inside the child, e.g., writing onClick={props.onClick} is correct, but onClick={props.onClick()} calls it immediately.

jsx

function Parent() {
  function handleClick() {
    alert('Clicked!');
  }

  // Wrong: calls handleClick immediately
  // return <Child onClick={handleClick()} />;

  // Right: pass function reference
  return <Child onClick={handleClick} />;
}

function Child(props) {
  // Wrong: calls function immediately on render
  // return <button onClick={props.onClick()}>Click</button>;

  // Right: pass function to onClick handler
  return <button onClick={props.onClick}>Click</button>;
}

Quick Reference

Remember these tips when passing functions as props:

• Pass the function without parentheses to avoid immediate execution.
• Use descriptive prop names like onClick, onSubmit, or handleAction.
• Destructure props in the child for cleaner code.
• Functions passed as props can update parent state or trigger side effects.

Key Takeaways

Pass functions as props by assigning them without parentheses, e.g., onClick={handleClick}.

Call the function inside the child component using props.functionName() or onClick={props.functionName}.

Avoid calling the function immediately when passing it to prevent unwanted behavior.

Use clear prop names and destructure props in children for readability.

Functions passed as props allow child components to communicate actions back to parents.