React Formik Tutorial - 30 - Reset Form Data

all right guys we are here at the final video on our youtube form component in this video we are going to learn how to reset the form data there are two scenarios of handling form reset let's start with the first one the first scenario is resetting the form data with a reset button and this is pretty straightforward i'm going to scroll down to the bottom of our form and just before the submit button i'm going to add another button called reset and set the type attribute to reset if you now go back to the browser fill in some data scroll down further and click on reset you can see that the entered values are cleared out so resetting the form data is basically setting the form values to the initial values object based on your requirement you can choose to add the reset button if you want to allow the user to reset their form data the second scenario is resetting the form data after form submission has completed often if you are able to successfully submit your form you see the success message and the form would have reset the values to facilitate another submission to handle this scenario we use the submit props in the onsubmit method so after setting is submitting property to false we can clear out the form data using the method on submit props dot reset form let's head to the browser and test this out i'm going to fill in the form data and click on submit we can see that the form was submitted and at the same time the form data has been reset and we can start entering new set of values so that is about resetting the form data you can either reset it with a button of type reset or by calling the reset form method in the on submit handler all right with that we come to the end of all concepts that i wanted to cover in formic even though we have learned a lot we haven't really built a form that is more practical like a login form or a user registration form these forms tend to have different types of form controls like inputs drop downs radio buttons check boxes and so on only when we have learnt all of that is when we can say we have truly learnt formic so starting next video let's see how to build different reusable formic components with the hope of putting it all together to build a practical user login and user registration form thank you guys for watching don't forget to subscribe and i'll see you guys in the next video

Channel: Codevolution

Views: 36,622

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, Formik, React Forms, React Formik, Forms in React

Id: IIOVHGG9vzY

Length: 3min 19sec (199 seconds)

Published: Wed Jun 17 2020