Form with array
To work with arrays there is a hook useFormArray which will return an object with methods to manage an array stored inside form.
const { remove } = useFieldArray({ formControl, name: "inventory" });
return (
<VStack w="full" alignItems="flex-start">
<Field
rffFormControl={formControl}
rffName="warehouse"
rffComponent={ChakraFormInput}
label="Warehouse"
/>
{formControl.values.inventory.map((_, i) => (
<HStack key={i}>
<Field
rffFormControl={formControl}
rffName={`inventory.${i}.name`}
rffComponent={ChakraFormInput}
label="Name"
/>
<Field
rffFormControl={formControl}
rffName={`inventory.${i}.code`}
rffComponent={ChakraFormInput}
label="Code"
/>
<Field
rffFormControl={formControl}
rffName={`inventory.${i}.quantity`}
rffComponent={ChakraFormInput}
label="Quantity"
/>
<Button
size="md"
minWidth="auto"
variant="outline"
colorScheme="red"
onClick={() => remove(i)}
>
Delete
</Button>
</HStack>
))}
<Button onClick={formControl.handleSubmit}>Submit</Button>
</VStack>
);