How to pass a Function as a Prop in React

avatar
Borislav Hadzhiev

Last updated: Jan 16, 2023
5 min

banner

# Table of Contents

  1. How to pass a Function as props in React
  2. Pass a function with arguments as a Prop
  3. Pass a function as a Prop from the Child to the parent
  4. Adding extra functionality to the function in the Child component
  5. Pass onChange event handler to Child component in React

# 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.
  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() { console.log('Function ran in Child component'); 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.

App.js
<Child handleClick={handleClick} />
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 need to pass a function as props in React TypeScript, check out the following tutorial.

# Pass a function with arguments as a Prop

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) { console.log('Function ran in Child component'); 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.

# Pass a function as a Prop from the Child to the parent

If you need to pass a function as a prop from the Child to the Parent component:

  1. Define a function in the Parent component that takes a parameter.
  2. Call the function from the Child, passing it another function as a parameter.
  3. Call the function in the Parent component.
App.js
import {useState} from 'react'; function Child({handleClick}) { const logger = () => { console.log('Function defined in Child'); }; return ( <div> <button onClick={event => handleClick(logger)}>Click</button> </div> ); } export default function Parent() { const [count, setCount] = useState(0); const handleClick = func => { // ๐Ÿ‘‡๏ธ call the function the Child component passed func(); setCount(count => count + 1); }; return ( <div> <Child handleClick={handleClick} /> <h2>Count: {count}</h2> </div> ); }

pass function as prop from child to parent

The handleClick function in the Parent component takes another function as a parameter.

We passed the function as a prop to the Child component and called it, passing it the logger() function.

Everything handleClick is invoked, we call the function from the Child component and update the state.

I've also written a detailed guide on how to call a child function from a parent component.

# Adding extra functionality to the function in the Child component

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.

# Pass onChange event handler to Child component in React

To pass an onChange event handler to a child component:

  1. Define the event handler function in the parent component.
  2. Pass it as a prop to the child component.
  3. Set it to the onChange prop on the input field in the child.
App.js
import {useState} from 'react'; function Child({handleChange}) { return ( <input id="message" name="message" onChange={handleChange} /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event) { setMessage(event.target.value); } return ( <div> <Child handleChange={handleChange} /> <h2>Message is: {message}</h2> </div> ); }

pass onchange to child

We passed a handleChange function to a child component.

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. handleChange={handleChange()}, then it would get invoked immediately on page load, which is not what we want.

# Pass onChange event handler with parameter to Child component

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({handleChange}) { return ( <input id="message" name="message" onChange={handleChange} /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event, anotherParam) { console.log(anotherParam); setMessage(event.target.value); } return ( <div> <Child handleChange={event => handleChange(event, 'another param')} /> <h2>Message is: {message}</h2> </div> ); }

pass onchange event handler with parameter to child component

We passed a parameter to the handleChange 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.

# Adding extra functionality to the handleChange function

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({handleChange}) { function wrapHandleChange(event) { console.log('Child triggered onChange'); // ๐Ÿ‘‰๏ธ your logic before handleChange(event); // ๐Ÿ‘‰๏ธ your logic after } return ( <input id="message" name="message" onChange={wrapHandleChange} autoComplete="off" /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event) { setMessage(event.target.value); } return ( <div> <Child handleChange={handleChange} /> <h2>Message is: {message}</h2> </div> ); }

adding extra functionality to handlechange function

We wrapped the handleChange 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 value of the input field.

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.

Copyright ยฉ 2024 Borislav Hadzhiev