Get value from child component to parent component

To get the value from a child component into the parent component in React is not that complicated but it is quite easy to forget, at least I did, so let’s go through the steps!

This is React so there are a few options, for one, create an hook which is shared by both components, or push up the value into the store (if you’re using Redux or similar), or do the traditional callback way which we will do here.

In the child component, have an property in your interface that takes in an function
In the parent: Pass a property which is a function to the child which can execute its own parameter function.
In the child, we will execute the parent function however we want, this is also where we will pass our child function (which will be executed by the parent)

Let’s say we have an App.tsx like this:

import './App.css'
import { MyChildComponent } from './MyChildComponent'

function App() {

  return (
    <div className="App">
      <MyChildComponent title={"hello"}></MyChildComponent>
    </div>
  )
}

export default App

and MyChildComponent.tsx

import { FC } from "react"


interface MyChildProperties {
    title: string
}
export const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {
    return(<div>{props.title}</div>);
}

Now we get an nice little hello text there, but what about if we want to push up things from MyChildComponent to our parent (in this case the App.tsx)? Let’s start by preparing our child component by adding our function we want to execute.

We also have to add a property as an incoming prop, we can name it executeFunc which takes a function that returns void.

import { FC, useEffect } from "react"


interface MyChildProperties {
    title: string,
    executeFunc: (callback: () => void) => void
}

export const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {
    const doStuff = () : void => {
        console.log("hello from child");
        alert("hello from child component")
    };

    useEffect(() => {
        props.executeFunc(doStuff);
    }, []);

    return(<div>{props.title}</div>);
}

Great, now all we need to do is pass the executeFunc like this from our parent component:

import './App.css'
import { MyChildComponent } from './MyChildComponent'

function App() {

  const executer = (callback: () => void) : void => {
    callback();
  }

  return (
    <div className="App">
      <MyChildComponent executeFunc={executer} title={"hello"}></MyChildComponent>
    </div>
  )
}

export default App

Result:

Well what about if you have a value you want to set from the child to the parent? Simply just change from returning void to returning whatever you want like, let’s change so that we return a string and also print it to the user:

import { useState } from 'react';
import './App.css'
import { MyChildComponent } from './MyChildComponent'

function App() {

  const executer = (callback: () => string) : void => {
    const myChildComponentText = callback();
    alert(myChildComponentText + " from the child!");
  }

  return (
    <div className="App">
      <MyChildComponent executeFunc={executer} title={"hello"}></MyChildComponent>
    </div>
  )
}

export default App

import { FC, useEffect } from "react"


interface MyChildProperties {
    title: string,
    executeFunc: (callback: () => string) => void
}

export const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {
    const doStuff = () : string => {
        console.log("hello from child");
        return "heeello"
    };

    useEffect(() => {
        props.executeFunc(doStuff);
    }, []);

    return(<div>{props.title}</div>);
}

In that way we get the text from our parent component by returning the value from callback.

return value from child component from parent component