7. Forms #

Created Sat Dec 30, 2023 at 1:06 PM

Hand written notes done. See OneNote

Topics #

1. Introduction
2. Building-the-Login-Form
3. Building-Better-Forms-with-Formik
4. Form-Validation-with-Yup
5. Building-the-ErrorMessage-Component
6. The-Touched-State
7. Building-the-Field-Component
8. Building-the-SubmitButton-Component
9. Building-the-Form-Component
10. Organizing-Components
11. Building-the-Listing-Edit-Screen
12. Fixing-the-Placeholder-Color

Formik and Yup #

• Formik is available for RN
• Yup can be used for validation. Works since it’s just a JS validation library

Error message #

Instead of rendering an error message after every form component, i.e. coding the error message in the feature, just add an error UI in every input element. so only error prop needs to be set, in addition to value and handleChange.

Touched state #

When making a form, in addition to ‘value’, ‘error’ and ‘handleChange’. Keep a ‘touched’ boolean state too (initially false).

This avoids the form showing errors when it loads first, which is an annoying feeling.

When the form is initialized, don’t show errors until the user has touched the input element once, i.e. touched is true. Of course, touched stays true ones it becomes true.

To set it, use onBlur => setTouched(true)