Begrip: useZodValidatedForm

De useZodValidatedForm hook is een hook die gebruikt wordt om de code die voor elk formulier geschreven moet worden af te zonderen en te herbruiken. Deze hook is niet standaard beschikbaar, maar wordt aangereikt door de backend-docenten.

De hook heeft drie parameters:

• schema: Een Zod validatieschema waarmee in inhoud van het formulier gevalideerd wordt.
• action: Een server (form) action die gebruikt wordt om de inhoud van het formulier te verwerken.
• options: De optionele configuratie die doorgegeven wordt aan de useForm hook.

De hook geeft een array met vier elementen terug.

• hookForm: De data die teruggegeven wordt door useForm
• action: De functie die aan de action property van Form of <form> gekoppeld moet worden.
• actionState: De state van de useActionState hook.
• isPending: Een boolean die aangeeft of het formulier bezig is met een inzending te verwerken.

const Foo: FunctionComponent = () => {
  const [hookForm, createFoo, actionState, isPending] = useZodValidatedForm(createFooZodSchema, createFooAction)
  
  // Dit is de Form component die door docenten aangereikt wordt, niet de component uit react-hook-form of Next.
  return <Form hookForm={hookForm} action={createFoo}>
      ...
    </Form>
}