how to pass variable to another component react-CodePudding

I'm trying to pass variable from one component to another one like

const filter = ()=>{
const value ="test"
 

return (<H1>you are watching test</h1>)


}

and want to use value variable in this component

const home = ()=>{
 

return (<H1>you are watching {value}</h1>)


}

CodePudding user response：

You can pass a value from children to parent like that:

First solution by passing function from parent to children component: Children:

const home = ({setValue})=>{ 
SetValue(x)
return (<H1>Home</h1>)
}

Parent

const [value٫setValue] = useState()
const filter = ()=>{
return (<Home setValue={setValue}/>)

Second solution by using a global state management system like Context, Redux or Recoil...

CodePudding user response：

First solution by passing props from parent to children component: Children:

const home = ({value})=>{ 
return (<H1>you are watching {value}</h1>)
}

Parent

const filter = ()=>{
const value ="test"
return (<Home value={value}/>)

}

Second solution by using a global state menagement like Redux, Recoil, Context...