10:[["$","p",null,{"children":["You know about the differences between the ",["$","$Le",null,{"href":"/controlled-vs-uncontrolled-inputs-react/","children":"controlled vs. uncontrolled form inputs"}],"."]}],"\n",["$","p",null,{"children":"You may have started out with uncontrolled form inputs — which is perfectly fine!"}],"\n",["$","p",null,{"children":["It turns out your requirements have got more sophisticated.\nYou need to ",["$","$Le",null,{"href":"/form-recipe-disable-submit-button-react/","children":"disable that submit button"}]," or ",["$","$Le",null,{"href":"/instant-form-fields-validation-react/","children":"instantly validate your fields"}],", perhaps."]}],"\n",["$","p",null,{"children":"And for that, you need your inputs to be controlled."}],"\n",["$","p",null,{"children":"So how do you go from uncontrolled to controlled?"}],"\n",["$","p",null,{"children":"The transition is straightforward.\nYou would need to:"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":"Identify all form controls — textboxes, selects, checkboxes."}],"\n",["$","li",null,{"children":"Initialize the state for each of these."}],"\n",["$","li",null,{"children":["Make these controls \"get\" their value from ",["$","code",null,{"children":"this.state"}],"."]}],"\n",["$","li",null,{"children":["Make these controls \"set\" new values to ",["$","code",null,{"children":"this.state"}]," — using the ",["$","code",null,{"children":"onChange"}]," prop."]}],"\n",["$","li",null,{"children":["Change your submit handler to get values from the state, instead of ",["$","code",null,{"children":"ref"}],"s."]}],"\n"]}],"\n",["$","p",null,{"children":"Suppose you had a form with uncontrolled inputs, something like this:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"UncontrolledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token function-variable function","children":"handleSubmit"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," email ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"_emailInput"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"value"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," agreeCheckbox ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"_agreeCheckbox"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"checked"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token spread operator","children":"..."}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"form"]}]," ",["$","span",null,{"className":"token attr-name","children":"onSubmit"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleSubmit"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"email",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"ref"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token parameter","children":"inp"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"_emailInput"}]," ",["$","span",null,{"className":"token operator","children":"="}]," inp",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"checkbox",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"ref"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token parameter","children":"inp"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"_agreeCheckbox"}]," ",["$","span",null,{"className":"token operator","children":"="}]," inp",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","h3",null,{"children":"1. Identify all form controls"}],"\n",["$","p",null,{"children":"As simple as it sounds, you are just taking a mental (or paper, or code) note of what your form has.\nIt's important that you give each control a meaningful name.\n\"Email field\" instead of just \"a text field\"."}],"\n",["$","p",null,{"children":"In the example above, the form controls are:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"an email field;"}],"\n",["$","li",null,{"children":"an \"agree to terms\" checkbox."}],"\n"]}],"\n",["$","h3",null,{"children":"2. Initialize the state for these"}],"\n",["$","p",null,{"children":["You now have a list of what's inside your form.\nThe next step would be to start storing the values of these things in ",["$","code",null,{"children":"this.state"}],", instead of relying on the browser to store these for us in DOM."]}],"\n",["$","p",null,{"children":"Don't worry about how these will be used or updated just yet."}],"\n",["$","p",null,{"children":"Continuing the example, we would need the state to contain:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"a string with the value of the email field;"}],"\n",["$","li",null,{"children":"a boolean indicating whether the user agrees to the terms."}],"\n"]}],"\n",["$","p",null,{"children":["In code, we would set it in the ",["$","code",null,{"children":"constructor"}]," like this:"]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"ControlledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token function","children":"constructor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"super"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n email",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"\""}],["$","span",null,{"className":"token punctuation","children":","}],"\n agree",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token boolean","children":"false"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","h3",null,{"children":"3. Make the controls \"get\" their values from state"}],"\n",["$","p",null,{"children":["We are now kind of storing the values of these controls inside ",["$","code",null,{"children":"this.state"}],".\nNow it's time to tell our inputs to use these values."]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"ControlledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token comment","children":"// constructor omitted"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"form"]}]," ",["$","span",null,{"className":"token attr-name","children":"onSubmit"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleSubmit"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"email",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"value"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"email"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"checkbox",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"checked"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"agree"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","div",null,{"className":"note","children":["$","p",null,{"children":["Why's it that we are using ",["$","code",null,{"children":"checked"}]," for the checkbox, but ",["$","code",null,{"children":"value"}]," for the text inputs?\nWhat would you use for textareas, or selects, or radio buttons?\nRefer to the \"What makes an input controlled\" section of ",["$","$Le",null,{"href":"/controlled-vs-uncontrolled-inputs-react/","children":"Controlled vs. uncontrolled inputs in React"}],"."]}]}],"\n",["$","h3",null,{"children":"4. Make the controls \"set\" their values to state"}],"\n",["$","p",null,{"children":"An input that shows a static value and cannot be changed isn't of much value."}],"\n",["$","p",null,{"children":"So we need to allow the inputs to update the state back."}],"\n",["$","p",null,{"children":["If you need a refresher, here's an excerpt from ",["$","$Le",null,{"href":"/controlled-vs-uncontrolled-inputs-react/","children":"Controlled vs. uncontrolled inputs in React"}],":"]}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":["Every time you type a new character, ",["$","code",null,{"children":"handleNameChange"}]," is called.\nIt takes in the new value of the input and sets it in the state."]}],"\n",["$","p",null,{"children":"$L15"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["It starts out as an empty string — ",["$","code",null,{"children":"''"}],"."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["You type ",["$","code",null,{"children":"a"}]," and ",["$","code",null,{"children":"handleNameChange"}]," gets an ",["$","code",null,{"children":"a"}]," and calls ",["$","code",null,{"children":"setState"}],".\nThe input is then re-rendered to have the value of ",["$","code",null,{"children":"a"}],"."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["You type ",["$","code",null,{"children":"b"}],". ",["$","code",null,{"children":"handleNameChange"}]," gets the value of ",["$","code",null,{"children":"ab"}]," and sets that to the state.\nThe input is re-rendered once more, now with ",["$","code",null,{"children":"value=\"ab\""}],"."]}],"\n"]}],"\n"]}],"\n",["$","p",null,{"children":[["$","strong",null,{"children":"This flow kind of 'pushes' the value changes to the form component"}],", so the ",["$","code",null,{"children":"Form"}]," component always has the current value of the input, without needing to ask for it explicitly."]}],"\n",["$","p",null,{"children":["This means your data (state) and UI (inputs) are always in sync.\nThe state gives the value to the input, and the input asks the ",["$","code",null,{"children":"Form"}]," to change the current value."]}],"\n"]}],"\n",["$","p",null,{"children":["We are going to write an event handler for every input, and pass it as the ",["$","code",null,{"children":"onChange"}]," prop."]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"ControlledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token comment","children":"// contructor omitted"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"handleEmailChange"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"evt"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," email",["$","span",null,{"className":"token operator","children":":"}]," evt",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"value"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"handleAgreeChange"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"evt"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," agree",["$","span",null,{"className":"token operator","children":":"}]," evt",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"checked"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"form"]}]," ",["$","span",null,{"className":"token attr-name","children":"onSubmit"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleSubmit"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"email",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"value"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"email"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleEmailChange"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"checkbox",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"checked"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"agree"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleAgreeChange"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","h3",null,{"children":["5. Change your submit handler to get values from state, instead of ",["$","code",null,{"children":"ref"}],"s"]}],"\n",["$","p",null,{"children":["Now for the easiest part, instead of reading from ",["$","code",null,{"children":"ref"}],"s in ",["$","code",null,{"children":"handleSubmit"}],", we will simply get from the state."]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"ControlledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token function-variable function","children":"handleSubmit"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," email ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"email"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," agree ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"agree"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token spread operator","children":"..."}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"All in all, the new, controlled form would look like this:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"ControlledForm"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token function","children":"constructor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"super"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n email",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"''"}],["$","span",null,{"className":"token punctuation","children":","}],"\n agree",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token boolean","children":"false"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"handleSubmit"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," email ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"email"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," agree ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"agree"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token spread operator","children":"..."}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"handleEmailChange"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"evt"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," email",["$","span",null,{"className":"token operator","children":":"}]," evt",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"value"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"handleAgreeChange"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"evt"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," agree",["$","span",null,{"className":"token operator","children":":"}]," evt",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"checked"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"form"]}]," ",["$","span",null,{"className":"token attr-name","children":"onSubmit"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleSubmit"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"email",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"value"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"email"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleEmailChange"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}]," ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"checkbox",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token attr-name","children":"checked"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"agree"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"handleAgreeChange"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"And we can now have the most up-to-date values right in the state, enabling us to do much more than uncontrolled inputs would allow."}]]