Flat arrays

[emil-malmgaard-rasmussen]

Hello, was wondering if it is going to be possible to have flat arrays, to do something like this:
<Controller key={field.id} name={categories[${index}]} ... />
Any time soon?

I keep getting warnings like these:
"name" prop should be in object shape: name="test[index].name"
But my endpoint takes an array of objects.

Best Regards!

[Moshyfawn]

RHF doesn't support flat arrays ATM.
Ref: RHF docs on useFieldArray:

Name of the field. Important: make sure name is in object shape: name=test.0.name as we don't support flat arrays.

[bluebill1049]

Awesome! Would you like to share your solution? It may be helpful to others well

[emil-malmgaard-rasmussen]

Yes of course, I actually have another question, I'm not sure what to categorize it as, wether I should open a new "issue".
When I created multiple Controllers with render/as={} (from React Select)
and I supplied the key={field.id} i experienced a bug where, when I had 1 controller and selected a item in the dropdown added a new controller with append({object}) it would clear the previous controller, if I then selected in the 1st controller again, and appended once again, it would stay. this proceed to happen for all the controllers, if you selected, cleared, selected, it would stay there after the second select. This bug wasn't happening after I removed key={field.id}

Thought I would create a Codesandbox but should I open a new ticket? 🙂

[bluebill1049]

I think a seperate question is better.

[pfcodes]

I understand why a unique id is required. But what brought me to this discussion is that in my use case, I need a flat array to store unique IDs. Would be nice if I could do that using useFieldArray

[memben]

As it took me a few minutes to get the setup in my case right, here is my solution :)

// getValues did not work for me
const values = form.watch(`values`) || [];

const append = () => {
  form.setValue(`values`, [...values, ""]);
};

const remove = (index: number) => form.unregister(`values`);

[afonsomatos]

None of the solutions worked for me, here's what worked:

export function useFlatArray<TFieldValues extends FieldValues>({
    name,
    control
}: {
    name: FieldArrayPath<TFieldValues>;
    control: Control<TFieldValues>;
}) {
    const fieldArray = useFieldArray({ control, name });
    return {
        ...fieldArray,
        append(value: string) {
            fieldArray.append(
                // @ts-ignore
                new String(value)
            );
        }
    };
}

And then, if you're using zod, use z.coerce.string inside your z.array.

[fekete965]

That's quite an elegant solution! Thank you! 👍