Want to create interactive content? It’s easy in Genially!

Get started free

Forms management

Antonio Moruno

Created on March 21, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Math Lesson Plan

Primary Unit Plan 2

Animated Chalkboard Learning Unit

Business Learning Unit

Corporate Signature Learning Unit

Code Training Unit

History Unit plan

Explore all templates

Transcript

Forms Management

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

Formik please leave me alone

schemas
useField()
<Formik/>
useFormik()
validation
error handling
<Field/>
useFormikContext()
submit

Hasbulla ily

useFormik() vs <Formik/>

Managing forms

Similarities

initialValuesonSubmit validationSchema

Configuration

useFormik() -> Controlled -> value and onChange

Controlled vs Uncontrolled

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

Differences

useFormik() -> logic

Code spliting

<Formik/> -> representational

useFormik() -> No context

Contexts

<Formik/> -> Context

Jared approves

In our case, useFormik() fits better

Simpler forms

Avoid React Contexts

No custom components

Separation of concerns

Best training ever

Pro tips

Handling submit

Handling errors

Validation

Label and Input Bounding

The component prop

Pro tip 1

Handling submit

not this

Do this

  • onClick in <Button/>
  • onSubmit in <form/>
  • type="submit" in <Button/>
Pro tip 2

Handling errors

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

Validation

noValidate: Disables native form validation

required: Marks the field as required

Pro tip 4

Component prop

Pro tip 5

Label and input bounding

htmlFor + id = Accesibility for the win

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

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

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

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.