Skip to main content

Week 5, React Form Management Library

React form libraries will help tap into a lot of feature functionality without needing to build everything from scratch. React form libraries can manage complex form handling like data validation, styling, and dynamic rendering so they can focus more closely on business logic.

Goal of the week​

  1. Learn React-hook-from form management library.
  2. Build Complex form using react-hook-forms.
  3. Learn schema validation and apply complex schemas to validate forms.

Day 1 and 2: React-hook-forms​

React hook forms are Performant, flexible and extensible forms with easy-to-use validation.

  1. Learn basic usage and concepts of react-hook-forms
  2. Learn how to register fields and apply supported native validations
  3. Learn advanced concepts and usage of react-hook-forms
  4. Custom hooks for working with dynamic form, where user can add multiple fields.
  5. Understand schema validations and yup for handling complex validations.

Day 3 and 4:​

Task Due : Lets apply everything we understood in the past two days and learn more as we go through this assignment. The task is to implement a basic Editable Table component.

Requirements :

  1. The table will be initially empty.
  2. There should be a button to add a new row.
  3. Every row must contain two text input fields and two select fields, You can use any UI library.
  4. Every fields is a required fields and text fields must contain at least three characters.
  5. Against every row there should be an edit, delete and save button (disabled in case of any validation error).
  6. Validation errors are shown. Good to have : Only one row can be in edit state at a time, which means other rows show just textual data.

Hint: Use fieldArray and Yup.

Day 5​

Assignment: Discuss with your mentor to pick up an advanced level assignment e.g Git Notes

Code Reviews and more practice:​

Time to reach out to your mentor and get your assignment reviewed iterate and make it better.