Changing the child's useState from Parent component react hooks-CodePudding

I have e child component named Window and I have this useState in Window component:

Window Component:
      const [showWindow, setShowWindow] = useState(false);

Imagine this is the parent component

Parent component :
/////
////
////
<Window/>
<Button/ onClick={()=>{
setShowWindow(true)
}}>
/////
/////

As it can be seen I have a Button component here and I want to set the showWindow to 'true' through it.

How can I change the useState in the child component from its parent component like this example? How can I access to it?

CodePudding user response：

If I understand the question correctly, you would like to have the parent, able to change state that is defined in the child.

I don't believe this is possible exactly as described. A better solution might be to define the state inside the parent, then pass down the state to the child.

Parent component :
 const [showWindow, setShowWindow] = useState(false);

<Window showWindow = {showWindow} setShowWindow = {setShowWindow}/>
<Button/ onClick={()=>{
setShowWindow(true)
}}>

that should produce the functionality I think you are after. Furthermore, you can also pass the setter if you need to change the window within the window component ( which you likely do if this is a popup type component)

As another answer suggested, a further solution would be to use global state/context. This would allow you to avoid passing state around, but has more overhead

CodePudding user response：

To invoke functions in a child component use the