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

  • You have a big form to implement. You put the different sections of the form into different React function components.
  • The form, hence, the parent component has many child components.
  • The function components use the state hook to manage the state in the component and pass the state back to the parent component.
  • In the parent component, there is a Reset button.
  • After clicking the Reset button, you want to clear the state in all the function components.
  • Your child component state is not cleared
  • In the child function component, you add a clearState function.
  • You pass the clearState function from the child component to the parent by using one of the props function.
  • In the resetForm of parent component, call the clearState function to clear child state.
...(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>

--

--

--

Life is beautiful…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implementation of gRPC using NodeJS.

Front End Project

Conway’s Game of Life in JavaScript — Part VII — Stateless Components

Gettin’ Started with Angular 5 (Part 3) — Gettin’ Data From Your Users!

How I published my first npm package

Sharing source code and libraries in React

How To Get Current Date And Time In Node.js

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
Tom Liu

Tom Liu

Life is beautiful…

More from Medium

THE MAJOR DIFFERENCE BETWEEN WEB 2 AND WEB 3

What is Koa.js, and how does it work?

MysteryVenture Vol. 1: A Murder of Crowe’s

Pay my partner or supplier to make mistakes!