input / textarea

const [value, setValue] = useState<string | null>(null);
…
<input
  value={value}
  onChange={e => { setValue(e.target.value) }}
/>

select

const [option, setOption] = useState<string | null>(null);
…
<select
  value={option}
  onChange={e => { setOption(e.target.value) }}
>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
</select>

checkbox

const [checked, setChecked] = useState<boolean>(false);
…
<input
  type="checkbox"
  checked={checked}
  onChange={(e) => { setChecked(e.target.checked) }}
/>

radio

const [option, setOption] = useState<string | null>(null);
…
<input
  type="radio"
  name="preference"
  value="tomato"
  checked={option === "tomato"}
  onChange={(e) => { setOption(e.target.value) }}
/>

Controlled

• Form Data is handled by a React component
• Change Event → State Update → Re-Render
• For example,
  • on a keystroke
  • when selecting an option form a Dropdown

Uncontrolled

• Form Data is handled by the DOM
• State is updated only onBlur/onSubmit -> prevents needless re-renders
• But, sometimes controlled fields are unavoidable
  • React-Select
  • Material-UI

import { FormEvent, useRef } from 'react';

export default function RegistrationForm() {
  const inputEl = useRef<HTMLInputElement | null>(null);

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    console.log(inputEl.current?.value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" type="text" ref={inputEl} />
      <input type="submit" value="Submit" />
    </form>
  );
}

Demo

React Hook Form

type FormValues = { name: string; };

const { register, handleSubmit, formState } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = (data) => { console.log(data); };
const onError: SubmitErrorHandler<FormValues> = (error) => { console.log(error); };

return (
  <form onSubmit={handleSubmit(onSubmit, onError)}>
    <input defaultValue="Dr. React" {...register("name", 
      { required: { 
        value: true, 
        message: "The field 'name' is required!" }
      })}/>
    <input type="submit" />
  </form>
  )

Exercise: Stretch Goal

Look at what validations register() supports and try to validate the e-mail address input as accurately as possible.

Solution (Name Input)

type FormValues = { name: string; email: string; };
 
export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="Dr. React" 
            className={errors?.name?.type ? styles.inputError : ''}
            {...register('name', { required: { value: true, message: "Name is required!" }, maxLength: { value: 25, message: "The name should be shorter than 25 characters!" } })} />
      {errors?.name?.type && <span className={styles.errorMessage}>{errors.name.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}
type FormValues = { name: string; email: string; };
 
export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="Dr. React" 
            className={errors?.name?.type ? styles.inputError : ''}
            {...register('name', { required: { value: true, message: "Name is required!" }, maxLength: { value: 25, message: "The name should be shorter than 25 characters!" } })} />
      {errors?.name?.type && <span className={styles.errorMessage}>{errors.name.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}
type FormValues = { name: string; email: string; };
 
export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="Dr. React" 
            className={errors?.name?.type ? styles.inputError : ''}
            {...register('name', { required: { value: true, message: "Name is required!" }, maxLength: { value: 25, message: "The name should be shorter than 25 characters!" } })} />
      {errors?.name?.type && <span className={styles.errorMessage}>{errors.name.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}
type FormValues = { name: string; email: string; };
 
export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="Dr. React" 
            className={errors?.name?.type ? styles.inputError : ''}
            {...register('name', { required: { value: true, message: "Name is required!" }, maxLength: { value: 25, message: "The name should be shorter than 25 characters!" } })} />
      {errors?.name?.type && <span className={styles.errorMessage}>{errors.name.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}

Solution (E-Mail Input)

export default function Form() {
  /* ... (see previous slide) */
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      /* ... (see previous slide) */
      <input
        type="text" placeholder="react@zuhlke.com"
        className={errors?.email?.type ? styles.inputError : ''}
        {...register('email', { 
          required: { value: true, message: "The 'email' field is required!" }, 
          pattern: { value: /^[A-Z0-9._+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: "Invalid email!" } 
        })}
      />
      {errors?.email?.type && <span className={styles.errorMessage}>{errors.email.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}
export default function Form() {
  /* ... (see previous slide) */
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      /* ... (see previous slide) */
      <input
        type="text" placeholder="react@zuhlke.com"
        className={errors?.email?.type ? styles.inputError : ''}
        {...register('email', { 
          required: { value: true, message: "The 'email' field is required!" }, 
          pattern: { value: /^[A-Z0-9._+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: "Invalid email!" } 
        })}
      />
      {errors?.email?.type && <span className={styles.errorMessage}>{errors.email.message}</span>}
      <input type="submit" value="save" />
    </form>
  );
}