React is a component-based library, so you can build interactive apps one component at a time. Components are separate pieces of UI, but still interconnected. Props is a React feature that allows components to receive and pass data, similar to how you’d pass an argument to a function. This allows us to build complex apps with React.
In this article, we’ll explore how to use props to pass a function from parent to child components. If you enjoy learning about React, my blog has 50+ React tutorials.
Pass a Function via Props in React
Let’s see how to do this in 3 simple steps.
- Define the function
First, we need to create a function in the parent component. Most of the time, we pass down functions to handle events in child components, so let’s create a simple onClick event handler.
const handleClick = console.log("you just clicked a button")
When a user clicks a button, our event handler will simply log a message to the console.
- Pass the function via props
The syntax for setting props is similar to setting an attribute. You can think of props as custom attributes for components in React.
To pass a function, you can simply reference the name of the variable that stores the function. In this case, that would be handleClick variable.
<childComponent handler={handleClick} />
In this case, the name of the prop (the custom attribute) is handler. Curly braces are necessary to set its value to a JavaScript expression (handleClick variable holds the function).
Important: Do not call the function when you pass it via props. Only pass a reference to a function. Otherwise, the function will run when you don’t want it to (every time the component is rendered).
- Call the function in the child component
Now, let’s call the function passed to the child component via props.
Functional components must accept props as an argument.
Props is an object where properties and values correspond to props and values passed to the component. In this case, the props object has one property - handler and its value will be the function.
You can call the function using dot notation - props.handler() or you can use new syntax and destructure props object.
Why Should You Pass a Function via Props?
Keeping track of changes in the state and props is very important in React. Storing user data in one component makes your app more consistent and error-free. Usually, this component needs to be at (or near) the top of the component tree, so it can store child components’ internal data. This concept is often called the ‘Single Source of Truth.’
It’s also common to store user inputs in the state. Input elements are usually in child components, and logic is handled in the parent component. You need some way to get data from input elements to the parent component.
Props are strictly uni-dimensional - parent components can pass data (or, like in this case, a function) to child components, but the latter can not pass data up to parent components.
React developers often pass event handlers to child components, which pass arguments to event handlers that update the state of the parent component.