Member-only story

How to Pass Props from Child to Parent Component in React

PJ Codes
JavaScript in Plain English
2 min readJun 1, 2021

--

Learn this neat little trick to pass chunks of props back up the component tree!

Photo by Sai Kiran Anagani on Unsplash

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.

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by PJ Codes

An ordinary developer who teaches people nerdy stuff! pjcodes.com

Responses (1)

What are your thoughts?