React Formik Tutorial - 29 - Load Saved Data

welcome back everyone in this video we are going to learn how to load saved data back into our form if you're working on small forms like user registration or login you probably don't have a need to load save data however when you deal with forms that are broken into sections with several fields you often want to allow the user to save their progress come back at a later time and continue filling their form in this scenario apart from rendering the form we also need to fetch the saved data and fill those values into our form let's understand how to do that one point to mention though is that we are not really going to implement saving the form data or loading the form data from an API instead we are going to mock the loading of data as if it were to come from a database through an API alright let's go with this step by step first step let's define the saved data object this has to be of the same structure as the initial values object so I'm going to make a copy of the initial values object and make the changes copy and paste edit the constant name I'm going to call it saved values then immunity set name to vishwas email to V at example.com channel t code evolution comments to welcome t formic and finally address 221b Baker Street let's just assume this is the users progress with our YouTube form for our second step we are going to add a button to load this saved data if I scroll down to the bottom there are a lot of buttons at the moment so I'm going to comment out everything except the submit button and just above the submit button I'm going to add another button button the text is going to be load saved data and type is going to be button and what we want to do is on click of this button change form ik from reading initial values to reading saved values to do this let's create a state variable and update that it's first step 3 import you stayed from react and declare a new state variable with an initial value of null so within the YouTube form component you state variable is called form values the setter function is called set form values and the initial value is null now on click of this load saved data button we are going to set the form values state variable to the saved values finally for step number four we are going to change the value for the initial values prop on the format component it is now going to be initial values is equal to form values or initial values and the final piece to our puzzle is adding the Enable we initialize prop on the forma component this prop is really important because it decides whether your form can change initial values after the form has been initialized once all right let's save this and head to the browser to test it out on page load you can see that we have just vishwas as the initial value for the name field everything else is empty this is a reflection of the initial values object right here now at the bottom I'm going to click on load saved data button if you now take a look at the fields we have the saved values object showing up in the form we have named vishwas email we at example.com channel code evolution Commons and of course the address all the five fields have a different set of values we have successfully loaded data into our YouTube form let me go over the steps one more time first we created the saved values object which is mocking data that would be received from an API then we add a button at the bottom to mimic the fetch action of an API we created a state variable initialized to null and on click of this button we populate that state variable with the saved values object with an in-form forming to use the saved values if it is present and if it is not present use the initial values finally we tell forming two we initialization using a prop this is how you load saved data into a Formica form now the scenario we have here is that of when a form has already been loaded and then the user manually loads in saved data on a button click a possible use case is if there is a previously filled form and you want to allow the user to load that data into a new application form that would make the user experience much better a second scenario which is much simpler scenario would be to fetch a select drop-down values from an API in that case you definitely could show a loading indicator till your API call is done and once the API call is done update the state variable with the response and only after that is done render the format component again like I've been mentioning in almost every video your implementation might be slightly different based on your project requirements but that is pretty much about loading saved data in forming updating initial values and making use of the enable we initialized prop is the two main things you have to focus on thank you guys for watching feel free to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 39,432

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

Id: awCY7qnbkIA

Length: 7min 9sec (429 seconds)

Published: Wed Jun 17 2020