How to pass a Function as props in React

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

How to pass a Function as props in React #

To pass a function as props in React:

  1. Define the function in the parent component.
  2. Pass it as a prop to the child component, e.g. <Child handleClick={handleClick} />.
  3. Use the function in the child component.
App.js
import {useState} from 'react'; function Child({handleClick}) { return <button onClick={handleClick}>Increment</button>; } export default function App() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h2>Count is: {count}</h2> <Child handleClick={handleClick} /> </div> ); }

react pass function as props

We passed a function as a prop to a child component in React.

Notice that we didn't call the function when passing it as a prop. It's very important to pass a reference to the function, and not the result of calling the function.

If you pass the result of calling the function, e.g. handleClick={handleClick()}, then it would get invoked immediately when the page loads, which is not what we want.

If you want to pass a parameter to the function that you are passing as a prop, use an inline arrow function.

App.js
import {useState} from 'react'; function Child({handleClick}) { return <button onClick={handleClick}>Increment</button>; } export default function App() { const [count, setCount] = useState(0); function handleClick(event, num) { setCount(count + num); } return ( <div> <h2>Count is: {count}</h2> <Child handleClick={event => handleClick(event, 100)} /> </div> ); }

pass function as props with params

We passed a parameter to the handleClick function when passing it as a prop to the Child component. However, note that we are still passing a function as a prop, and not the result of calling one.

The event parameter might not be needed for your use case. All event handlers get called with the event object as the first argument, so we had to pass it to the function in this example.

You can also add extra functionality to the function you passed as a prop to the child component.

App.js
import {useState} from 'react'; function Child({handleClick}) { // 👇️ wrap passed in function function wrapHandleClick(event) { // 👉️ your logic before console.log('Child called handleClick'); handleClick(event); // 👉️ your logic after } return <button onClick={wrapHandleClick}>Increment</button>; } export default function App() { const [count, setCount] = useState(0); function handleClick(event, num) { setCount(count + num); } return ( <div> <h2>Count is: {count}</h2> <Child handleClick={event => handleClick(event, 100)} /> </div> ); }

wrap passed function

We wrapped the handleClick function into another function where we can run some extra logic before or after calling it.

This is useful when you have to await the return value of a Promise, or run some logic based on the return value of the passed function.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.