3^rd Practical Class:
Forms

• React Inputs
• React Hook Form
  • Controlled Inputs
  • Form Validation
• Forms in our Quacker App

React Inputs

Controlled input - you provide:

• value: current input value
• onChange: called each time user changes value in input (typing, paste, ...)
  • new value is in event.target.value

Disadvantages

• you must create a state and connect value & onChange for each field
• no built-in validation handling
• the whole form is re-rendered on every field value change

React Hook Form

react-hook-form.com

• library for handling forms in React
• uses custom hooks and React context to connect the form fields

Custom Controlled Inputs

• FormProvider - context holding the form state
• useForm() documentation - returns form methods passed to FormProvider
• useController() documentation - connects a single form field

Form Validation

• recommended to use a schema validation library
• pass a schema resolver to useForm()
• react-hook-form/resolvers - official resolvers of popular schema validation libraries

Advantage:

• all validation rules defined in one place

Yup

github.com/jquense/yup

Forms in our Quacker App

Base Components

• frontend/src/shared/hook-form/molecules/
  • Form.js - combining FormProvider and form
  • FormField.js - using Form Control components from Chakra UI

Form Example with Validation

• frontend/src/modules/auth/organisms/
  • SignUpForm.js