I have this select from shadcn
and I am trying to use it with zod
. Upon clicking on the select
, it would show these errors:
TypeError: undefined is not iterable (cannot read property
Symbol(Symbol.iterator))
I have these bookFormats.tsx
:
export const bookFormat = [
{label: "Hardcover", value: "Hardcover"},
{label: "Paperback", value: "Paperback"},
{label: "Board Book", value: "Board Book"},
{label: "Leather-bound", value: "Leather-bound"},
{label: "Large Print", value: "Large Print"}
] as const;
formSchema.tsx
export const formSchema = z.object({
format: z.enum(['Hardcover', 'Paperback', 'Board Book', 'Spiral-bound', 'Leather-bound', 'Large Print']),
})
The component::
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
format: 'Hardcover',
}
})
Then the `select`:
<FormField
control={form.control}
name="format"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Book Format</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[200px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? bookFormat.find(
(book) => book.value === field.value
)?.label
: "Select Book Format"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search language..." />
<CommandEmpty>No book format found </CommandEmpty>
<CommandGroup>
{bookFormat.map((book) => (
<CommandItem
value={book.label}
key={book.value}
onSelect={() => {
form.setValue("format", book.value)
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
book.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{book.label}
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>