Begrip: Form component

De Form component is een component die gebruikt wordt om formulieren te bouwen die react-hook-form en server actions gebruiken. Deze component is niet standaard beschikbaar, maar wordt aangereikt door de backend-docenten.

De Form component heeft twee optionele en twee verplichte properties:

• hookForm: Het resultaat van de useForm hook.
• action: De form action die uitgevoerd moet worden, i.e. het tweede element in de returnwaarde van de useFormState hook.
• actionResult: Het resultaat van de form action, i.e. de returnwaarde van de form action, het eerste element in de returnwaarde van de useFormState hook. Deze optionele property wordt gebruikt om de form action te resetten na een succesvolle submit, als deze property ontbreekt, werkt het submitten nog steeds, maar wordt het formulier niet automatisch leeg gemaakt als de form action mislukt is.
• id: Een optionele property die gebruikt kan worden om een id veld toe te voegen aan het formulier. Het veld wordt automatisch geregistreerd bij react-hook-form en kan gebruikt worden voor update formulieren.

import {z} from 'zod'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'

const zodSchema = z.object({
  example: z.string()
})

const Component: FunctionComponent = () => {
  const [action, actionResult] = useFormState(someFormAction, {success: false});
  const hookForm = useForm<z.infer<typeof zodSchema>>({
      defaulValues: {example: ''},
      resolver: zodResolver(zodSchema)
  });

  return (
    <Form hookForm={hookForm} action={createTag} actionResult={actionResult}>
      <input {...register('example')} />
      <button type="submit">Submit</button>
    </Form>
  );
};