Let’s say we have an App.tsx<\/strong> like this:<\/p>\n\n\n\n and MyChildComponent.tsx<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n We also have to add a property as an incoming prop, we can name it executeFunc <\/strong>which takes a function that returns void.<\/p>\n\n\n\n Great, now all we need to do is pass the executeFunc like this from our parent component:<\/p>\n\n\n\n Result:<\/p>\n\n\n\n Well what about if you have a value you want to set from the child to the parent? Simply just change from returning void <\/strong>to returning whatever you want like, let’s change so that we return a string <\/strong>and also print it to the user:<\/p>\n\n\n\n In that way we get the text from our parent component by returning the value from callback. <\/p>\n\n\n\n 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, … <\/p>\nimport '.\/App.css'\nimport { MyChildComponent } from '.\/MyChildComponent'\n\nfunction App() {\n\n return (\n <div className="App">\n <MyChildComponent title={"hello"}><\/MyChildComponent>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre><\/div>\n\n\n\nimport { FC } from "react"\n\n\ninterface MyChildProperties {\n title: string\n}\nexport const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {\n return(<div>{props.title}<\/div>);\n}<\/code><\/pre><\/div>\n\n\n\nimport { FC, useEffect } from "react"\n\n\ninterface MyChildProperties {\n title: string,\n executeFunc: (callback: () => void) => void\n}\n\nexport const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {\n const doStuff = () : void => {\n console.log("hello from child");\n alert("hello from child component")\n };\n\n useEffect(() => {\n props.executeFunc(doStuff);\n }, []);\n\n return(<div>{props.title}<\/div>);\n}<\/code><\/pre><\/div>\n\n\n\nimport '.\/App.css'\nimport { MyChildComponent } from '.\/MyChildComponent'\n\nfunction App() {\n\n const executer = (callback: () => void) : void => {\n callback();\n }\n\n return (\n <div className="App">\n <MyChildComponent executeFunc={executer} title={"hello"}><\/MyChildComponent>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre><\/div>\n\n\n\n![\"callback](\"https:\/\/fileidea.com\/wp-content\/uploads\/2022\/08\/image.png\")
<\/figure>\n\n\n\nimport { useState } from 'react';\nimport '.\/App.css'\nimport { MyChildComponent } from '.\/MyChildComponent'\n\nfunction App() {\n\n const executer = (callback: () => string) : void => {\n const myChildComponentText = callback();\n alert(myChildComponentText + " from the child!");\n }\n\n return (\n <div className="App">\n <MyChildComponent executeFunc={executer} title={"hello"}><\/MyChildComponent>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre><\/div>\n\n\n\nimport { FC, useEffect } from "react"\n\n\ninterface MyChildProperties {\n title: string,\n executeFunc: (callback: () => string) => void\n}\n\nexport const MyChildComponent: FC<MyChildProperties> = (props: MyChildProperties) => {\n const doStuff = () : string => {\n console.log("hello from child");\n return "heeello"\n };\n\n useEffect(() => {\n props.executeFunc(doStuff);\n }, []);\n\n return(<div>{props.title}<\/div>);\n}<\/code><\/pre><\/div>\n\n\n\n![\"return](\"https:\/\/fileidea.com\/wp-content\/uploads\/2022\/08\/image-1.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"