I’m using a fieldArray to build a form using react-hook-form. This form is used for both create and update an user and i’m also using the “values” prop from react-hook-form. The field using the fieldArray api has 2 simple time inputs, and there’s a button “add” that you can click to render more time inputs (it starts empty).
The problem is, when i’m fetching data before this form and it has any breakTime (the array field name) it is not rendered immediately in the ui. But, when I click to add it renders all the fields fetched from the api. (see images below)
all fields filled, except the array field
after clicking on add button of array field
My code below:
const form = useForm<OperatorOrManageData>({
resolver: zodResolver(operatorOrManagerSchema),
defaultValues: initializeDefaultValues(),
mode: "all",
values: data,
})
const { fields, append, remove } = useFieldArray({
name: "breakTime",
control: form.control,
})
{fields.map((field, index) => (
<div className="flex w-full flex-row items-center gap-3" key={field.id}>
<div className="w-56 flex-row items-start whitespace-nowrap rounded-full bg-primaryBlue-100 px-4 py-2">
<span>Horário de intervalo</span>
</div>
<FormField
control={form.control}
name={`breakTime.${index}.start` as const}
render={({ field }) => (
<FormItem>
<FormControl>
<div className="relative">
<Input
{...field}
type="time"
className="flex rounded-full border border-primaryGray-400 py-2 pe-4 ps-12"
value={field.value}
/>
<div className="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-s-full bg-primaryGray-100">
<span>De</span>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={`breakTime.${index}.finish` as const}
render={({ field }) => (
<FormItem>
<FormControl>
<div className="relative">
<Input
{...field}
type="time"
className="flex rounded-full border border-primaryGray-400 py-2 pe-4 ps-12"
value={field.value}
/>
<div className="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-s-full bg-primaryGray-100">
<span>Até</span>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant={"destructive"}
size={"sm"}
type="button"
className="rounded-full p-2"
onClick={() => remove(index)}
>
<Trash />
</Button>
</TooltipTrigger>
<TooltipContent className="border-0 bg-red-500 text-secondaryWhite-100 dark:border-0 dark:bg-red-500">
<p>Excluir</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
))}
I’ve tried to use controlled field array as in the docs https://react-hook-form.com/docs/usefieldarray but didn’t work.