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:

1. Open ContactPage.tsx and start by removing useState from the React import, because this is no longer required.
2. Then, at the top of the component function, remove the call to useState (this iteration of the form won’t use any state).
3. Remove the value and onChange props from the field editors, because we are no longer controlling field values with the state.
4. Now, add a name attribute on all the field editors as follows:

   <form onSubmit={handleSubmit}>

     <div className={fieldStyle}>

       <label htmlFor="name">Your name</label>

       ...