Controlled vs Uncontrolled Inputs

Controlled Inputs

A recommended way to work with forms is to keep the value of a form element inside the state and use the state as single source of truth. This concept is called controlled inputs.

const ApplicationForm = () => {
  const [name, setName] = useState('');
  const [surName, setSurName] = useState('');
  return (
    <form>
    <fieldset>
      <legend>Application Form</legend>
    
      <div className="field">
        <label for="name">Name:</label>
        <input id="name" value={name} onChange={(e) => setName(e.target.value)}/>
      </div>

      <div className="field">
        <label for="surname">Surname:</label>
        <input id="surname" value={surName} onChange={(e) => setSurName(e.target.value)}/>
      </div>

      <button> submit </button>
    </fieldset>
    </form>
  );
}

Uncontrolled Inputs

Uncontrolled inputs use the DOM as the single source of truth rather than managing its value via React state. This can be helpful when integrating non-React code into React code.

React Hook Form

A popular third-party library for managing forms and inputs is React Hook Form.