How to get array of string from react hook form using fieldArray

[zubair999]

I want to get array of string from react hook form like this
const data = ['a','b'] using fieldArray

[agammann]

useFieldArray expects an array of objects; flat arrays of strings aren't supported. Keep the editable rows as { value: string } and map them to strings when submitting:

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

function Example() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { items: [{ value: 'a' }, { value: 'b' }] },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items',
  });

  return (
    <form onSubmit={handleSubmit(({ items }) => {
      const data = items.map(({ value }) => value);
      console.log(data); // ['a', 'b'] initially
    })}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.value`)} />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: '' })}>Add</button>
      <button type="submit">Submit</button>
    </form>
  );
}

Map the submitted items, since fields is used to render rows and their stable IDs. I checked the object-row approach with React Hook Form 7.89.0, including append, remove, editing, and submitting; the result stayed a plain string array. The field-array rules document the flat-array limitation.