useFieldArray

    The useFieldArray hook is an alternative to the FieldArray component. Its API if similar and accepts all the same options as the component.

    API

    import { useFieldArray } from 'react-formal';
    • useFieldArray(name: string) => [T[], FieldArrayHelpers<T>, FieldMeta]

      Retrieve the values at a given path as well as a set of array helpers for manipulating list values.

      function ContactList() {
      const [values, arrayHelpers, meta] = useFieldArray("contacts")
      return (
      <ul>
      {values.map((value, idx) => (
      <li key={value.id}>
      <Form.Field name={`contacts[${idx}].name`} />
      <button onClick={() => arrayHelpers.remove(value)}>
      Remove
      </button>
      </li>
      )}
      </ul>
      )
      }

      Parameters

      • namestring

        A field path, should point to an array value in the form data

      Return Value
      [T[], FieldArrayHelpers<T>, FieldMeta]

    • useFieldArray(options: UseFieldArrayOptions, name) => [T[], FieldArrayHelpers<T>, FieldMeta]

      Retrieve the values at a given path as well as a set of array helpers for manipulating list values.

      function ContactList() {
      const [values, arrayHelpers, meta] = useFieldArray({
      name: 'contacts',
      validates: 'otherField'
      })
      return (
      <ul>
      {values.map((value, idx) => (
      <li key={value.id}>
      <Form.Field name={`contacts[${idx}].name`} />
      <button onClick={() => arrayHelpers.remove(value)}>
      Remove
      </button>
      </li>
      )}
      </ul>
      )
      }

      Parameters

      • optionsUseFieldArrayOptions
      • name

        A field path, should point to an array value in the form data

      Return Value
      [T[], FieldArrayHelpers<T>, FieldMeta]