Field arrays

Felte supports creating fields from arrays by adding an index to its name. There's a few things to consider when working with field arrays:

useForm also returns some helpers to manage field arrays:

Using field arrays would look something like this:

import React from 'react';
import { useForm } from '@felte/react';

function Form() {
  const { form, data, addField, unsetField } = useForm({
    initialValues: {
      interests: [{ value: '' }],
    },
  });

  const interests = data('interests');

  function removeInterest(index) {
    return () => unsetField(`interests.${index}`);
  }

  function addInterest(index) {
    return () => addField(`interests`, { value: '' }, index);
  }

  return (
    <form ref={form}>
      {interests.map((interest, index) => (
        <div key={interest.key}>
          <input name={`interests.${index}.value`} />
          <button type="button" onClick={addInterest(index + 1)}>
            Add Interest
          </button>
          <button type="button" onClick={removeInterest(index)}>
            Remove Interest
          </button>
        </div>
      ))}
    </form>
  );
}