Is there a way to remove a participant from the client side before updating the actual state when the submit button is clicked?
Currently, I am working with react-hook-form and TanstackQuery. My process involves fetching data using Tanstack query, displaying it with defaultValues in my form fields, but I'm facing an issue where I need to delete a user on the client side first.
Edit/[id]/page/tsx.
const EditAppointment =({params}) => {
const appoinment = useQuery({
queryKey: ['appointment', 'data', 'history', id],
queryFn: () => fetch(`/api/single-sched/${id}`).then((res) => res.json())
})
const { data } = appoinment
const form = useForm<CreateAppointmentSchemaType>({
resolver: zodResolver(CreateAppointmentSchema),
});
const removeAssistant = (name: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
console.log(`Removing assistant: ${name}`);
}
return (
<Form {...form}>
<form>
<FormField
control={form.control}
name="title"
defaultValue={data?.title}
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
</FormItem>
)}
/>
<Table className='max-w-[400px]'>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.name_of_assistance.map((item:{name: string, email: string}) => {
return (
<TableRow>
<TableCell>{item.name}</TableCell>
<TableCell>{item.email}</TableCell>
<TableCell>
<Button onClick={() => removeAssistant(item.name)}
variant="destructive" size="icon">
<Trash2 />
</Button>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</form>
<Form />
)
}