How to Use and Pass Functions as Props— React

Photo by Ferenc Almasi on Unsplash

When I was first learning how to use React, the idea of passing props between different files/components seemed daunting, but now that I have a much better understanding of it, I find it extremely useful, and dare I say, even fun to use at times. Now that I have good understanding of it, I’m here to share with you How to Use and Pass Functions as Props.

Explanation

For now, let’s say we have two components within our app component: “Homepage” and “Profile”. Our Profile and Homepage our siblings under our App component. Like this:

And in the App component, let’s make a function:

function clickTest() {
  console.log("test")
}

Let’s say we want to execute this function in our Homepage component without re-creating the function. How would we pass this function from our App component down to Homepage so it can interact with it? Well, We’d have to pass it down to Homepage as a prop.

Looking at line 7, that’s where we passed clickTest() to HomePage. The “clickTest” on the left is declaring a name for “{clickTest}” on the right. We could name the left one anything we’d want (Of course we’d want something accurate to call it), but for now we’re going to keep the names the same.

Now let’s go ahead and take a look at our HomePage component. For the HomePage component to take the “clickTest” prop, it must accept it at the top of the function.

function Homepage({clickTest}) {
...

And just like that, HomePage now has access to the clickTest function!

Now, let’s say Homepage hold’s a new function:

At this current state, only the HomePage component can access the “homePageFunction()”. What if we wanted to pass this function to it’s sibling, “Profile”? Well, unfortunately, that’s not possible. In fact, it’s not possible for our App component to access the homePageFunction().
The best analogy I have is that roots can grow down the tree of components, but the only way to retrieve the info back, is by climbing back up the roots. There needs to be a way to transfer the data back. Because of these limitations, it’s always a good idea to have a good plan of your components before building out too much of your code.

Here’s a few more ideas that may give you a better understanding.

Let’s say our HomePage has 2 more child components: “LogIn” and “Panel”.

Remember our clickTest() function that we built all the way in our App component? As long as we passed it down, every single component so far, could have access to it, as that was built at the very top of your react project.

What about our homePageFunction() that we built? Which components can access that? Well, Because it’s built in our HomePage component, our new “LogIn” and “Panel” components can access it, but “App” and “Profile” cannot.

Conclusion

So, to recap:

• Functions created can only be passed down the tree
• Any component under the component that made the function can use it
• Functions cannot be used above the component made
• Functions cannot be used by siblings of the component made
• Functions can be passed as far down as you want

This has been the basics of passing functions as props in React. I hope this has given some insight on how to start passing props! This was the main speedbump I had when first learning React, so I hope my knowledge can be used by you!