10:[["$","p",null,{"children":["You may have seen many articles saying ",["$","strong",null,{"children":["\"you shouldn't use ",["$","code",null,{"children":"setState"}],",\""]}]," and the docs are claiming ",["$","strong",null,{"children":["\"",["$","code",null,{"children":"ref"}],"s are bad\""]}],"...\nThat is so contradictory.\nIt's hard to understand how to \"get it right\" and even what are the criteria for choosing."]}],"\n",["$","p",null,{"children":"How the hell are you supposed to make forms?"}],"\n",["$","p",null,{"children":["After all, forms ",["$","em",null,{"children":"are"}]," central to many web apps out there.\nAnd yet, form handling in React seems to be a bit of a... corner stone?"]}],"\n",["$","p",null,{"children":"Fear no more.\nLet me show you the differences between the approaches, as well as when you should use each."}],"\n",["$","h2",null,{"children":"The Uncontrolled"}],"\n",["$","p",null,{"children":[["$","strong",null,{"children":"Uncontrolled inputs"}]," are like traditional HTML form inputs:"]}],"\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":"Form"}]," ",["$","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":"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":"<"}],"div"]}],["$","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":"\""}],"text",["$","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":["They remember what you typed.\nYou can then get their value using ",["$","a",null,{"href":"https://facebook.github.io/react/docs/refs-and-the-dom.html","children":"a ref"}],".\nFor example, in ",["$","code",null,{"children":"onClick"}]," handler of a button:"]}],"\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":"Form"}]," ",["$","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":"handleSubmitClick"}]," ",["$","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"}]," name ",["$","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":"_name"}],["$","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 comment","children":"// do something with `name`"}],"\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":"<"}],"div"]}],["$","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":"\""}],"text",["$","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 punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"input"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","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":"_name"}]," ",["$","span",null,{"className":"token operator","children":"="}]," input",["$","span",null,{"className":"token punctuation","children":")"}],["$","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":"<"}],"button"]}]," ",["$","span",null,{"className":"token attr-name","children":"onClick"}],["$","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":"handleSubmitClick"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Sign up"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","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":["In other words, ",["$","strong",null,{"children":"you have to 'pull' the value from the field when you need it"}],".\nThis can happen when the form is submitted."]}],"\n",["$","p",null,{"children":"That is the simplest way to implement the form inputs.\nThere certainly are valid cases for using it: in simple forms in the real world; and when learning React."}],"\n",["$","p",null,{"children":"It's not as powerful, though, so let's see those controlled inputs next."}],"\n",["$","p",null,{"children":["$","em",null,{"children":"For what it's worth, I'm giving away two chapters of my book about forms. Get it below if you want; and continue reading the article."}]}],"\n",["$","$L12",null,{"previewId":"tmfhr","dripFormId":"90822328","buttonLabel":"Get your free chapters!","analyticsId":"tmfhr-sample_contr-vs-uncontr-mid-article","children":[["$","h4",null,{"children":"What if you could implement the form experience your users deserve?"}],["$","p",null,{"children":["$","p",null,{"children":[["$","a",null,{"href":"/the-missing-forms-handbook-of-react/","children":"The Missing Forms Handbook of React"}]," can help you breeze through\nyour React forms. The excerpt contains a table of contents and two chapters: on building an intuition for forms and\nhandling various form controls."]}]}]]}],"\n",["$","p",null,{"children":["$","em",null,{"children":"Article continues:"}]}],"\n",["$","h2",null,{"children":"The Controlled"}],"\n",["$","p",null,{"children":["A ",["$","strong",null,{"children":"controlled input"}]," accepts its current value as a prop, as well as a callback to change that value.\nYou could say it's a more \"React way\" of approaching this (which doesn't mean you should ",["$","strong",null,{"children":"always"}]," use it)."]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","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":"value"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"someValue",["$","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":"{"}],"handleChange",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n"]}]}],"\n",["$","p",null,{"children":["Which is fine and all... but the value of this input ",["$","em",null,{"children":"has"}]," to live in the ",["$","code",null,{"children":"state"}]," somewhere.\nTypically, the component that renders the input (aka the form component) saves that in its ",["$","code",null,{"children":"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":"Form"}]," ",["$","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 name",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","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\n ",["$","span",null,{"className":"token function-variable function","children":"handleNameChange"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"event"}],["$","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":"{"}]," name",["$","span",null,{"className":"token operator","children":":"}]," event",["$","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","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":"<"}],"div"]}],["$","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":"\""}],"text",["$","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":"name"}],["$","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":"handleNameChange"}],["$","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":["(Of course, it can be in the state of another component, or even in the separate state store, ",["$","$Le",null,{"href":"/should-i-put-form-state-into-redux/","children":"like Redux"}],".)"]}],"\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",["$","p",null,{"children":"This also means that the form component can respond to input changes immediately; for example, by:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"in-place feedback, like validations"}],"\n",["$","li",null,{"children":["$","$Le",null,{"href":"/form-recipe-disable-submit-button-react/","children":"disabling the button unless all fields have valid data"}]}],"\n",["$","li",null,{"children":"enforcing a specific input format, like credit card numbers"}],"\n"]}],"\n",["$","p",null,{"children":"But if you don't need any of that and consider uncontrolled to be simpler, go for it."}],"\n",["$","h3",null,{"children":"What makes an element \"controlled\""}],"\n",["$","p",null,{"children":["There are other form elements, of course.\nYou have checkboxes and radios and ",["$","code",null,{"children":"select"}],"s and textareas."]}],"\n",["$","p",null,{"children":"A form element becomes \"controlled\" if you set its value via a prop.\nThat's all."}],"\n",["$","p",null,{"children":"Each of the form elements, though, has a different prop for setting that value, so here's a little table to summarize:"}],"\n",["$","div",null,{"style":{"maxWidth":"100%","overflowX":"scroll"},"children":["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"children":"Element"}],["$","th",null,{"children":"Value property"}],["$","th",null,{"children":"Change callback"}],["$","th",null,{"children":"New value in the callback"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"children":["$","code",null,{"children":""}]}],["$","td",null,{"children":["$","code",null,{"children":"value=\"string\""}]}],["$","td",null,{"children":["$","code",null,{"children":"onChange"}]}],["$","td",null,{"children":["$","code",null,{"children":"event.target.value"}]}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","code",null,{"children":""}]}],["$","td",null,{"children":["$","code",null,{"children":"checked={boolean}"}]}],["$","td",null,{"children":["$","code",null,{"children":"onChange"}]}],["$","td",null,{"children":["$","code",null,{"children":"event.target.checked"}]}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","code",null,{"children":""}]}],["$","td",null,{"children":["$","code",null,{"children":"checked={boolean}"}]}],["$","td",null,{"children":["$","code",null,{"children":"onChange"}]}],["$","td",null,{"children":["$","code",null,{"children":"event.target.checked"}]}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","code",null,{"children":"

"}]}],["$","td",null,{"children":["$","code",null,{"children":"value=\"string\""}]}],["$","td",null,{"children":["$","code",null,{"children":"onChange"}]}],["$","td",null,{"children":["$","code",null,{"children":"event.target.value"}]}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","code",null,{"children":"<select />"}]}],["$","td",null,{"children":["$","code",null,{"children":"value=\"option value\""}]}],["$","td",null,{"children":["$","code",null,{"children":"onChange"}]}],["$","td",null,{"children":["$","code",null,{"children":"event.target.value"}]}]]}]]}]]}]}],"\n",["$","h2",null,{"children":"Conclusion"}],"\n",["$","p",null,{"children":["Both the controlled and uncontrolled form fields have their merit.\n",["$","strong",null,{"children":"Evaluate your specific situation and pick the approach"}]," — what works for you is good enough."]}],"\n",["$","p",null,{"children":"If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine.\nYou don't have to listen to what the various articles are saying is \"bad.\""}],"\n",["$","div",null,{"style":{"maxWidth":"100%","overflowX":"scroll"},"children":["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"children":"feature"}],["$","th",null,{"children":"uncontrolled"}],["$","th",null,{"children":"controlled"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"children":"one-time value retrieval (e.g. on submit)"}],["$","td",null,{"children":"✅"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","$Le",null,{"href":"/submit-time-validation-react/","children":"validating on submit"}]}],["$","td",null,{"children":"✅"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","$Le",null,{"href":"/instant-form-fields-validation-react/","children":"instant field validation"}]}],["$","td",null,{"children":"❌"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","$Le",null,{"href":"/form-recipe-disable-submit-button-react/","children":"conditionally disabling submit button"}]}],["$","td",null,{"children":"❌"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"enforcing input format"}],["$","td",null,{"children":"❌"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"several inputs for one piece of data"}],["$","td",null,{"children":"❌"}],["$","td",null,{"children":"✅"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":["$","$Le",null,{"href":"/array-form-inputs/","children":"dynamic inputs"}]}],["$","td",null,{"children":"❌"}],["$","td",null,{"children":"✅"}]]}]]}]]}]}],"\n",["$","p",null,{"children":["Also, this is not an once-and-for-all decision: you can always migrate to controlled inputs.\n",["$","$Le",null,{"href":"/turn-uncontrolled-into-controlled/","children":"Going from uncontrolled to controlled inputs is not hard"}],"."]}],"\n",["$","p",null,{"children":["Finally, here's ",["$","$Le",null,{"href":"/on-forms-react/","children":"the organized list of my posts about forms in React"}],"."]}],"\n",["$","h2",null,{"children":"References"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","a",null,{"href":"https://facebook.github.io/react/docs/forms.html","children":"Forms page on the official React docs"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"https://facebook.github.io/react/docs/events.html","children":"Supported events"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"https://facebook.github.io/react/docs/refs-and-the-dom.html","children":"Refs"}]}],"\n"]}]]
</article></body></html>