How to send value from child component to parent?(functional components)

Question

I have a parent called main_homepageComponent and two child search_barComponent & Iteams_Component

I want to do something like this:-

When a user puts some text in search-box(input text) of search_barComponent I want to hide Iteams_Component

Hierarchy:-

--main_homepageComponent
  --search_barComponent
  --Iteams_Component

Currently, I am trying to create a state variable in my search_barComponent, and when the user input some text then:-

const [search, setSearch] = useState('')  //extra code removed
onChangeText={(text) => {setSearch(text)}}

and in my main_homepageComponent I added something like this:-

 const [search, setSearch] = useState('') //extra code removed
  <ScrollView style={{ height: windowHeight }}>
                        {search.length < 1 ? (
                            <View>
                                <ItemsComponent></ItemsComponent>
                            </View>
                        ) : null}
                    </ScrollView>

But I do not know how can I send back the search value from search_barComponent to main_homepageComponent so I can run

            {search.length < 1 ? (
                            <View>
                                <ItemsComponent></ItemsComponent>
                            </View>
                        ) : null}
                    </ScrollView>

this and hide Iteams_Component when user input text in searchbox.

Please provide an answer for functional components because I do not understand the class component much

This is my app image:-

Does this answer your question? [ReactJS - Lifting state up vs keeping a local state](https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state) — Emile Bergeron, Feb 09 '21 at 14:49

score 2 · Accepted Answer · answered Feb 09 '21 at 14:06

Instead of creating a search and setSearch state in each component, just create one in parent component and send them as props to children. in main_homepageComponent when you want to add child components...

<Search_barComponent search={search} setSearch={setSearch}/>
<Iteams_Component search={search} setSearch={setSearch}/>

and in the child components just use props.search and props.setSearch instead of creating them again.

there's a rule in react you always have to keep in mind: "single source of truth, not more" bring your state in hierarchy high up enough so every child depends on a single source of truth...

Raquel Mercado · Answer 2 · 2021-02-09T14:00:14.473

export default function Child (props) {
  const [ name, setName ] = React.useState({someDefault:1})

useEffect(()=>{
    props.onChange(name);
  },[name]);

 return (
   <div>
     <input name="name" 
            onChange={e=>setName({...name, name:e.target.value})}
     />
   </div>
  )

}




export default function Parent () {
    const [ name, setName ] = React.useState({})
  
    const  handleChange = (newValue) =>{
        setName(newValue);
    }
    
    return (
        <div>
            <Child value={name} onChange={handleChange}/>
        </div>
    )
}

How to send value from child component to parent?(functional components)

2 Answers2