React Academy · Les

Dynamische velden met useFieldArray

Voeg dynamische formuliervelden toe, verwijder ze en wijzig hun volgorde met de useFieldArray-hook.

Les 4 van 413 stappen

Dynamische velden met useFieldArray is een gratis React Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les gebruik je de useFieldArray-hook van React Hook Form om formulieren met dynamische lijsten van velden te bouwen, bijvoorbeeld voor het toevoegen, verwijderen en herordenen van items.

Wat is useFieldArray?

useFieldArray beheert een array met velden binnen een React Hook Form. Het biedt de methoden append, prepend, remove, swap, move en insert om de lijst met velden aan te passen.

import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

Instellen: control uit useForm

useFieldArray vereist het object `control` uit useForm. Haal dit samen met register en handleSubmit uit het resultaat.

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

De velden weergeven

Gebruik `fields` om elk item weer te geven. Gebruik de `id` van het veld als React-sleutel, niet de index. Registreer elk veld met de syntaxis voor arraypaden.

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Nieuwe velden toevoegen

Roep append() aan met een object met standaardwaarden om een nieuw veld aan het einde van de lijst toe te voegen. Het formulier registreert het automatisch.

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Velden verwijderen

Roep remove(index) aan om een veld op een specifieke positie te verwijderen. Alle volgende velden schuiven op en hun registraties worden automatisch bijgewerkt.

<button onClick={() => remove(index)}>Delete</button>

Validatie van het minimumaantal velden

Je kunt de lengte van de array in een Zod-schema valideren met .min() om te garanderen dat er ten minste één veld bestaat.

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Velden verwisselen en verplaatsen

Gebruik `swap(indexA, indexB)` om twee velden om te wisselen, of `move(from, to)` om een veld te verplaatsen. Hiermee bouw je sorteerbare lijsten met velden voor slepen en neerzetten.

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

Geneste useFieldArray

Je kunt useFieldArray nesten binnen een andere useFieldArray voor formulieren met meerdere niveaus, bijvoorbeeld een factuur met regelitems die elk subitems hebben.

Arraygegevens verzenden

Bij het verzenden geeft handleSubmit de volledige array door als onderdeel van het gegevensobject. Je vindt deze op data.phoneNumbers: een array met objecten die overeenkomen met de structuur van de velden.

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Korte controle

Waarom moet je field.id gebruiken, en niet de array-index, als React-sleutel bij het weergeven van velden met useFieldArray?

Beantwoord dit in de interactieve les

Samenvatting

useFieldArray geeft je een array met velden en de methoden append, remove, swap en move. Gebruik field.id als React-sleutel, registreer velden met de syntaxis 'fieldName.index.subfield' en valideer arrays met min/max van Zod.

Cursus voltooid

Gefeliciteerd! Je hebt **Formulieren beheren met React Hook Form** afgerond. Je kunt nu performante formulieren bouwen met RHF, Zod-schemavalidatie toepassen en dynamische arrays met velden maken.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Dynamische velden met useFieldArray” gratis?

Ja — de volledige tekst van “Dynamische velden met useFieldArray” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Dynamische velden met useFieldArray”?

Voeg dynamische formuliervelden toe, verwijder ze en wijzig hun volgorde met de useFieldArray-hook. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Dynamische velden met useFieldArray”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Academy