How to pass a Function as props in React

avatar

Borislav Hadzhiev

Thu Apr 21 20222 min read

banner

Photo by Daniel Hansen

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, 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 on page load, 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 parameter, 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 in 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 calling it or after.

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.