Want to make creations as awesome as this one?

Transcript

Forms Management

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

Formik please leave me alone

<Formik/>

useFormik()

<Field/>

validation

submit

useFormikContext()

schemas

error handling

useField()

useFormik() vs <Formik/>

Hasbulla ily

Similarities

3

2

1

2

Configuration

initialValuesonSubmitvalidationSchema

1

Managing forms

Differences

Code spliting

Controlled vs Uncontrolled

Contexts

useFormik() -> Controlled -> value and onChange

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

useFormik() -> logic

<Formik/> -> representational

useFormik() -> No context

<Formik/> -> Context

Separation of concerns

Simpler forms

No custom components

Avoid React Contexts

Jared approves

In our case, useFormik() fits better

Pro tips

The component prop

Handling submit

Handling errors

Label and Input Bounding

Validation

Best training ever

Handling submit

Pro tip 1

Do this

not this

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

  • onClick in <Button/>

Handling errors

Pro tip 2

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

Validation

Pro tip 3

noValidate: Disables native form validation

required: Marks the field as required

Component prop

Pro tip 4

Label and input bounding

Pro tip 5

htmlFor + id = Accesibility for the win

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

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

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

Kata

Now it's time for the

I still hate Formik lol

  • 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 tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • 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 tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit