fair-rose•5mo 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•5mo 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•5mo ago

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

fair-roseOP•5mo 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•5mo 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;

kapa.ai•5mo ago

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

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

Did you find this page helpful?