harsh-harlequin•3y ago

useForm with action edit adds a / after path

5 Replies

Hi @saarthak08. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook in refine can be used with the action: "edit" for editing an existing record. It requires the id of the record to determine which record to edit. By default, it uses the id from the route. This means that when you use useForm with action: "edit", it will append the id of the record to the path of your route. For example, if you have a route like localhost:3000/edit/, and you are editing the record with id 123, the useForm hook will make a request to localhost:3000/edit/123. Here is an example of how to use useForm with action: "edit":

import { useForm } from "@refinedev/react-hook-form";  
  
const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  
  
 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <br />  
 <label>Status: </label>  
 <select {...register("status")}>  
 <option value="published">published</option>  
 <option value="draft">draft</option>  
 <option value="rejected">rejected</option>  
 </select>  
 <br />  
 <textarea  
 {...register("content", { required: true })}  
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
  
const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  
  
 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <br />  
 <label>Status: </label>  
 <select {...register("status")}>  
 <option value="published">published</option>  
 <option value="draft">draft</option>  
 <option value="rejected">rejected</option>  
 </select>  
 <br />  
 <textarea  
 {...register("content", { required: true })}  
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

In this example, when the form is submitted, it updates the record with useUpdate and the id from the route is used to determine which record to update. For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below

harsh-harlequinOP•3y ago

@kapa.ai useForm with PUT

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useForm hook in refine is used to manage form data and handle form submission. When you use useForm with the action: "edit" option, it uses the HTTP PUT method to update an existing record. Here is an example of how to use useForm with action: "edit":

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },
 register,  
 handleSubmit,  
 formState: { errors },
 } = useForm({ resource: "posts", action: "edit" });  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <textarea  
 {...register("content", { required: true })}
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },
 register,  
 handleSubmit,  
 formState: { errors },
 } = useForm({ resource: "posts", action: "edit" });  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <textarea  
 {...register("content", { required: true })}
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

kapa.ai•3y ago

<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below

useForm with action edit adds a / after path

Did you find this page helpful?