useForm with action edit adds a / after path

useForm with action edit adds a / after path
kapa.ai
kapa.ai258d ago
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
kapa.ai258d ago
<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white
wise-white258d ago
@kapa.ai useForm with PUT
kapa.ai
kapa.ai258d 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>
);
};
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
kapa.ai258d ago
<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
refine build with uglify option on viterefine build with uglify option on viteBarrel files + import count causing long loading timesHey everyone, first of all again a big thanks to the refine Core and the community around. I've neveMuiAutocomplete narrowing optionsHello, I have troubles to make MuiAutocomplete according to your documentation. In my App it doesn'tInferencer stopped workingI'm unable to use Inferencer. I was using it earlier. I even tried to rollback to the old old versioTSX page format DateField with i18n localeHow on my custom TSX page format DateField with i18n locale? I cannot obtain current i18n locale by In my page strings are not translatedHello i created a page through the inferencer code, now i'm using this code but strings are not tranlist, default pageSizecurrent the pageSize always default to 10, how to change that value?Localize datetime from Strapi dataHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I VulnerabilityDoes anyone encounters this issues when using refine? marked <=4.0.9 Severity: high Inefficient ReBring Inference autogenerated Code to my pageHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I How do i set initial value onto useSelect with its label and also value?using useSelect antdesignanyone facing White screen of death whenanyone facing White screen of death when creating a MUI with example pages using vite js?Scroll on mobile with autocompleteHello. I have a small problem when I use autocomplete, when scrolling items on mobile phones, for soDefault query result duplicates the options of select options.Previously I have asked a question regarding how to create a custom option in select input https://dAdd Type to useFormHow do I make the object that I am manipulating, with the help of useForm hook, type safe? For instFreshed downloaded boilerplate app layout messed up on refreshHi, I created and downloaded a fresh app of Next.js + AntD + Custom Auth + RestAPI. When I run it loGoogle OAuth Not WorkingHi all, I have initialised a refine project using React + Vite config, and selected Google OAuth as Trigger AutoSave inside useFieldArrayHow to make use of AutoSave feature? I have implemented table using useFieldArray but it doesn't sav