Forms management

Trying to make forms cease to be a pain in the *ss

Forms Management

useField()

error handling

schemas

useFormikContext()

submit

validation

<Field/>

useFormik()

<Formik/>

Formik please leave me alone

Hasbulla ily

useFormik() vs <Formik/>

<Formik/> -> Context

useFormik() -> No context

<Formik/> -> representational

useFormik() -> logic

<Formik/> -> Uncontrolled -> name and <Field/>

useFormik() -> Controlled -> value and onChange

Contexts

Controlled vs Uncontrolled

Code spliting

Differences

Managing forms

initialValuesonSubmit validationSchema

Configuration

Similarities

In our case, useFormik() fits better

Jared approves

Avoid React Contexts

No custom components

Simpler forms

Separation of concerns

Best training ever

Validation

Label and Input Bounding

Handling errors

Handling submit

The component prop

Pro tips

• onClick in <Button/>

• onSubmit in <form/>
• type="submit" in <Button/>

not this

Do this

Pro tip 1

Handling submit

• error: If there's an error (normally by highlighting the field in red).

• helperText: Display the error.

Pro tip 2

Handling errors

required: Marks the field as required

noValidate: Disables native form validation

Pro tip 3

Validation

Pro tip 4

Component prop

htmlFor + id = Accesibility for the win

Pro tip 5

Label and input bounding

You can kiss them in the literal way too. I won't judge you

Try to KISS forms: Keep it simple, st*pid

Our platform forms are not too complicated (most of the times)

I still hate Formik lol

Now it's time for the

Kata

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.