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!

•2021-06-01

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.

Parent component:

import Child from "./Child";

function App() {
  const pull_data = (data) => {
    console.log(data); // LOGS DATA FROM CHILD (My name is Dean Winchester... &)
  };

  return (
    <div className="App">
      <Child func={pull_data} />
    </div>
  );
}

export default App;

Child component:

const Child = (props) => {
  props.func("My name is Dean Winchester & this is my brother Sammie");

  return (
    <>
      <h1>I am the Child Component!</h1>
    </>
  );
};

export default Child;