How to change state of parent from nested child in React Hooks? - reactjs

Question

I have 3 nested components in my React app.
1.Parent calling Child1
2.Child1 calling Child2
3.Child2 calling Child3
4.Child3
I want to show a Dialog pop up when user click a button.
The Dialog is in parent and I show it by setting a state variable
const[showDialog, setShowDialog] = useState(false);
true/false when user click on the ShowDialog Button
The problem is the button is in Child3.
So how I can make the state change in parent when I click the button in the last child.

Answer 1

use useContext ,useReducer hook, instead of passing props to the children, you can use useContext, useReducer hook to dispatch the action by onclick in the parent and get the true or false response from the context to the chlld component. here is the codeSandbox exmaple

Answer 2

Step 1 - Create a handler function in parent i.e which can toggle the showDialogue state to true or false
const showDialogHandler=()=>{
setShowDialog(prevState=> !prevstate)
}
Step 2: pass the handler reference to the child3
<Child3 onShowDialog={showDialogHandler} />
Step3 : assign that function passed through prop to onClick vent handler.
<button onClick={props.onShowDailog}>Show Dialog</button>

Answer 3

// Parent.js
const Parent = () => {
const [showDialog, setShowDialog] = useState(false);
return (
<>
<div>Show Dialog: {showDialog.toString()}</div>
<Child3 showDialog={showDialog} setShowDialog={setShowDialog} />
</>
);
};
// Child3.js
const Child3 = ({showDialog, setShowDialog}) => {
const handleShowDialog = useCallback(() => {
setShowDialog(!showDialog)
}, [setShowDialog, showDialog])
return (
<>
<button onClick={handleShowDialog}>Show Dialog</button>
</>
);
};