CODEWITHSUNDEEP
reactjsreact-native
sanket kheni
sanket kheni

Reputation: 1628

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

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:-

app Image

Upvotes: 1

Views: 499

Answers (2)

Ali Hamedani
Ali Hamedani

Reputation: 300

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...

Upvotes: 2

Raquel Mercado
Raquel Mercado

Reputation: 31

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>
    )
}

Upvotes: 0

Related Questions