Shadcn Form with server actions and prisma?
Unanswered
Briquet Griffon Vendéen posted this in #help-forum
Briquet Griffon VendéenOP
I am trying to use the form example to have this popover and its content fetched from the back end but I can t have the form as a server component as "useForm" from react-hook-form needs client side functions and prisma can't be used on the front end.
Basically trying to populate the skills as the users searches
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput
placeholder="Search skills..."
className="h-9"
onChangeCapture={handleSkillInputChange}
/>
<CommandEmpty>No skills found.</CommandEmpty>
<CommandGroup>
{skillSearchResults.map((skill) => (
<CommandItem
value={skill.skillName}
key={skill.id}
onSelect={() => {
form.setValue("skills", skill.skillName)
}}
>
{skill.skillName}
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
skill.skillName === field.name
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
Basically trying to populate the skills as the users searches
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput
placeholder="Search skills..."
className="h-9"
onChangeCapture={handleSkillInputChange}
/>
<CommandEmpty>No skills found.</CommandEmpty>
<CommandGroup>
{skillSearchResults.map((skill) => (
<CommandItem
value={skill.skillName}
key={skill.id}
onSelect={() => {
form.setValue("skills", skill.skillName)
}}
>
{skill.skillName}
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
skill.skillName === field.name
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
1 Reply
House Wren
you need to do the data fetching (the prisma query) in a server component and pass the results (make sure they can be serialized) as props to the a client component that contains the form.
you can still post to a server action from the client using useTransition.
you can still post to a server action from the client using useTransition.