Using uncontrolled fields
Uncontrolled fields are the opposite of controlled fields – it’s where field values aren’t controlled by state. Instead, native browser features are used to obtain field values. In this section, we will refactor the contact form to use uncontrolled fields and see the benefits.
Carry out the following steps:
- Open
ContactPage.tsx
and start by removinguseState
from the React import, because this is no longer required. - Then, at the top of the
component
function, remove the call touseState
(this iteration of the form won’t use any state). - Remove the
value
andonChange
props from the field editors, because we are no longer controlling field values with the state. - Now, add a
name
attribute on all the field editors as follows:<form onSubmit={handleSubmit}>
<div className={fieldStyle}>
<label htmlFor="name">Your name</label>
...