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

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

Imagine this is the parent ponent

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

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

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

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

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

Imagine this is the parent ponent

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

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

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

• javascript
• reactjs
• react-hooks

• Does this answer your question? Is it possible to share states between ponents using the useState() hook in React? – Emile Bergeron Commented Feb 11, 2022 at 19:50
• 1 Does this answer your question? Change react hook state from parent ponent – pilchard Commented Feb 11, 2022 at 21:50

3 Answers 3

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 ponent :
 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 ponent ( which you likely do if this is a popup type ponent)

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

To invoke functions in a child ponent use the useImperativeHandle hook in the Window ponent and forward a ref from the parent ponent to the child to imperatively invoke a function to update the state in the child.

Example:

Window

import { forwardRef, useImperativeHandle, useState } from 'react';

const Window = forwardRef((props, ref) => {
  const [showWindow, setShowWindow] = useState(false);

  useImperativeHandle(ref, () => ({
    showWindow: () => setShowWindow(true),
  }));

  ...

});

Parent

import { useRef } from 'react';

...

const windowRef = useRef();

...

<Window ref={windowRef} />
<Button onClick={() => windowRef.current.showWindow()}>
  Show Window
</Button>

Another way would be to reload the child ponent, causing it to reset the useState to its initial state.

import React, { useState } from 'react';

function ParentComponent() {
  const [resetKey, setResetKey] = useState(0);

  const resetChildComponent = () => {
    // Increment a key to reset the child ponent
    setResetKey((prevKey) => prevKey + 1);
  };

  return (
    <div>
      <button onClick={resetChildComponent}>Reset Child</button>
      <ChildComponent key={resetKey} />
    </div>
  );
}

function ChildComponent() {
  const [childState, setChildState] = useState('Initial State');

  return (
    <div>
      <p>Child State: {childState}</p>
      <button onClick={() => setChildState('New State')}>Change State</button>
    </div>
  );
}

export default ParentComponent;