React use case: reset state of the child function component from the parent component

...(props) {  [email, setEmail] = useState('');

// this method clear the state in child component
clearState = () => {
setEmail('');
}
// pass the clearState function back to parent
props.passClearStateFunc(clearState);
// many codes not relative to this topic, including pass state
// back etc... too much that I don't even want to know
...
}
//this is the reference to the child clearState function
clearChildState = null;
// this method assigns the child clearState function
// to the parent reference
assignClearChildState(childClearStateFunc) {
this.clearChildState = childClearStateFunc;
}
// this method gets the child state for completeness of
// the childComp tag
getStateCallback(email) {
//do something to use the child state
}
resetForm() {
this.clearChildState();
}
...
// this passes the assignClearChildState function
// from parent to child so the child can use it
// to pass the clearState back
<ChildComp getState={getStateCallback} passClearStateFunc={assignClearChildState} />
<button type="reset" onclick={resetForm}>
Reset
</button>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store