xenial-black•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

xenial-blackOP•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