Member-only story
How to Pass Props from Child to Parent Component in React
Learn this neat little trick to pass chunks of props back up the component tree!
Quick and easy:
If you’ve used React, you have obviously passed data down from a parent component to a child using props. This is called uni-directional data flow.
What if I showed you a little trick which could allow you to conversely pass small chunks of props from the CHILD component back up to the PARENT component?
Here’s the trick — very simple. We have 2 components:
- Parent:
App.js
- Child:
Child.js
Use the following steps:
- Create a function inside your parent component, pass it a parameter and log that parameter using
console.log
. - Pass the function name as props into your child component render.
- Invoke the function from props inside your child component.
- Pass in your data as an argument inside the invocation.
- Viola.
💡 Speed up your blog creation with DifferAI.
Available for free exclusively on the free and open blogging platform, Differ.