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 event handler. onClick 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 variable. handleClick <childComponent handler={handleClick} /> In this case, the name of the prop (the custom attribute) is . Curly braces are necessary to set its value to a JavaScript expression ( variable holds the function). handler handleClick 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). Important: 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 object has one property - and its value will be the function. props handler You can call the function using dot notation - or you can use new syntax and destructure props object. props.handler() 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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Augmentastic || Augmented Reality

How to Pass Components Via Props in React

How to Pass A Function via Props in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Guide To The render() Method in React

How To Get Key Clicked Element in React

How to Handle Hover Events in React

Avoiding Memory Leaks with Weak Events in C#

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

A Quick Guide To The render() Method in React

How To Get Key Clicked Element in React

How to Handle Hover Events in React

Avoiding Memory Leaks with Weak Events in C#

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps