Pass data from Child to Parent Component

         Previously we have seen that using props we can pass data from Parent Component to Child Component. Now let's see how we can pass data from child to parent component.

       To pass data from child to parent component we can use a function passed as a props from the parent component.

Let say we want to transfer color property from child to parent..

             import {useState} from "react"

             const App = () =>{

                     const [value, setValue] = useState("");

                     return(

                          <>

                              <h4 style ={{color: value}}>Parent Component: App</h4>                         

                               <Color setValue={setValue}>

                          </>

                     );

             }

            Color.js 

             const Color = (props) =>{

               return(

                    <>

                         <h1>Child Component: Color</h1>
                         <input type="text" placeholder="Enter color name here..." onChange ={e => props.setValue(e.target.value)} />

                    </>

               );

             }

            export default Color;

Observe the result, this is the way using which we can pass data from child component to parent component.

Continue Learning: children prop