fair-rose
fair-rose5mo ago

How to change form data before submitting when using the Edit component?

When using the <Edit /> component together with useForm from @refinedev/react-hook-form, how can I change the data before it gets sent to the API?
5 Replies
kapa.ai
kapa.ai5mo ago
Hi @Nitai. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change form data before submitting it when using the <Edit /> component together with useForm from @refinedev/react-hook-form, you can follow these steps: 1. Import the necessary modules: Ensure you have the necessary imports from @refinedev/react-hook-form and other relevant libraries. 2. Define the onFinishHandler function: This function will modify the form data before it is sent to the API. 3. Use the useForm hook: Initialize the form using the useForm hook and pass the onFinishHandler to the handleSubmit function. Here is an example code snippet demonstrating how to achieve this:
import { useForm } from "@refinedev/react-hook-form";
import React from "react";
import { FieldValues } from "react-hook-form";

export const UserEdit: React.FC = () => {
const {
refineCore: { onFinish },
register,
handleSubmit,
} = useForm();

const onFinishHandler = (data: FieldValues) => {
onFinish({
fullName: `${data.name} ${data.surname}`,
});
};

return (
<form onSubmit={handleSubmit(onFinishHandler)}>
<label>Name: </label>
<input {...register("name")} />
<br />

<label>Surname: </label>
<input {...register("surname")} />
<br />

<button type="submit">Submit</button>
</form>
);
};
import { useForm } from "@refinedev/react-hook-form";
import React from "react";
import { FieldValues } from "react-hook-form";

export const UserEdit: React.FC = () => {
const {
refineCore: { onFinish },
register,
handleSubmit,
} = useForm();

const onFinishHandler = (data: FieldValues) => {
onFinish({
fullName: `${data.name} ${data.surname}`,
});
};

return (
<form onSubmit={handleSubmit(onFinishHandler)}>
<label>Name: </label>
<input {...register("name")} />
<br />

<label>Surname: </label>
<input {...register("surname")} />
<br />

<button type="submit">Submit</button>
</form>
);
};
In this example, the onFinishHandler function combines the name and surname fields into a single fullName field before submitting the data to the API. For more detailed information, you can refer to the documentation on modifying form data before submission (https://refine.dev/docs/packages/react-hook-form/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@1091820430047838349> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-roseOP5mo ago
@kapa.ai How about doing the same when using the <Edit /> component provided by one of the UI libraries, such as @refinedev/mui
kapa.ai
kapa.ai5mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To change form data before submitting it when using the <Edit /> component provided by @refinedev/mui, you can follow these steps: 1. Import the necessary modules: Ensure you have the necessary imports from @refinedev/mui and other relevant libraries. 2. Define the onFinishHandler function: This function will modify the form data before it is sent to the API. 3. Use the useForm hook: Initialize the form using the useForm hook and pass the onFinishHandler to the handleSubmit function. Here is an example code snippet demonstrating how to achieve this:
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import React from "react";
import { FieldValues } from "react-hook-form";

const PostEdit: React.FC = () => {
const {
saveButtonProps,
handleSubmit,
register,
refineCore: { onFinish },
} = useForm();

const onFinishHandler = (data: FieldValues) => {
onFinish({
...data,
fullName: `${data.name} ${data.surname}`,
});
};

return (
<Edit
saveButtonProps={{
...saveButtonProps,
onClick: (e: any) => {
handleSubmit(onFinishHandler, () => false)(e);
},
}}
>
<form>
<label>Name: </label>
<input {...register("name")} />
<br />

<label>Surname: </label>
<input {...register("surname")} />
<br />

<button type="submit">Submit</button>
</form>
</Edit>
);
};

export default PostEdit;
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import React from "react";
import { FieldValues } from "react-hook-form";

const PostEdit: React.FC = () => {
const {
saveButtonProps,
handleSubmit,
register,
refineCore: { onFinish },
} = useForm();

const onFinishHandler = (data: FieldValues) => {
onFinish({
...data,
fullName: `${data.name} ${data.surname}`,
});
};

return (
<Edit
saveButtonProps={{
...saveButtonProps,
onClick: (e: any) => {
handleSubmit(onFinishHandler, () => false)(e);
},
}}
>
<form>
<label>Name: </label>
<input {...register("name")} />
<br />

<label>Surname: </label>
<input {...register("surname")} />
<br />

<button type="submit">Submit</button>
</form>
</Edit>
);
};

export default PostEdit;
In this example, the onFinishHandler function combines the name and surname fields into a single fullName field before submitting the data to the API. For more detailed information, you can refer to the documentation on modifying form data before submission (https://refine.dev/docs/packages/react-hook-form/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@1091820430047838349> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?