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

Data visualization methods Part 1 — D3.js

Angular vs React: What to Choose for Your App?

Introducing NgRx Auto-Entity

5 Tools or Technologies Every Software Engineer Needs to Know

Effectiveness, skill, and Productivity. Becoming a better software engineer

How to send the JSON data from a Drupal 8 site?

FP++ (functional programming put to practice)

Windows 11 rolls out a test build with tabs in File Explorer : Gadget Game News

System DARK mode detection in browser

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

Database Access | UX | Carousel Update Synopsis

Stripe- Collison Brothers!

Let’s Make a Controlled Form Together in React

image of various dogs with a form above

Ironhack’s Prework Challange 2: Wireframe Prototype Glovo App