future-harlequin•11mo ago

How to delete input field name with value before submitted form

my-json-data like this " "groupdetail": [ { "term_1": 11, "term_2": 5555, "term_3": 4444, "term_4": 10, "term_5": 10, "term_6": 7777, "term_7": 55, "term_8": 44, "term_9": 33, "id": 1 }, "

export const EditPage = ({ items, id }) => {
  const [termValues, setTermValues] = useState({});
  const [itemsState, setItemsState] = useState(items);

  const {
    handleSubmit,
    refineCore: {onFinish},

    saveButtonProps,
  } = useForm<HttpError>({
    shouldUseNativeValidation: true,
    refineCoreProps: {
      resource: "groupdetail",
      action: "edit",
      id: id,
    },
  });

const handleRemove = () => {
    if (Object.keys(itemsState).length > 2) {
      const keys = Object.keys(itemsState);
      const lastItemKey = keys[keys.length - 1];
      setItemsState((prevState: any) => {
        const newState = {...prevState};
        delete newState[lastItemKey];
        return newState;
      });
    }
  };

const onSubmit = () => {
    console.log(itemsState);
    onFinish(itemsState).then(r => {
    });
  };

<form onSubmit={handleSubmit(onSubmit)}>

export const EditPage = ({ items, id }) => {
  const [termValues, setTermValues] = useState({});
  const [itemsState, setItemsState] = useState(items);

  const {
    handleSubmit,
    refineCore: {onFinish},

    saveButtonProps,
  } = useForm<HttpError>({
    shouldUseNativeValidation: true,
    refineCoreProps: {
      resource: "groupdetail",
      action: "edit",
      id: id,
    },
  });

const handleRemove = () => {
    if (Object.keys(itemsState).length > 2) {
      const keys = Object.keys(itemsState);
      const lastItemKey = keys[keys.length - 1];
      setItemsState((prevState: any) => {
        const newState = {...prevState};
        delete newState[lastItemKey];
        return newState;
      });
    }
  };

const onSubmit = () => {
    console.log(itemsState);
    onFinish(itemsState).then(r => {
    });
  };

<form onSubmit={handleSubmit(onSubmit)}>

When "handleRemove" occurs, the object with the last data, "term_9": 33, deleted is passed to onSubmit. However, in my-json-data, "term_9": 33 remains intact. How can I delete this?

2 Replies

kapa.ai•11mo ago

Hi @florent_26629. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems that you are trying to modify the form data before it is submitted. In refine, you can use the useForm hook to achieve this. However, the extracts do not provide a direct solution for deleting a field from the form data before submission. The useForm hook in refine allows you to modify the form data before it is submitted to the backend. This is done by defining a custom submit handler function that modifies the form data and then calls the onFinish function provided by the useForm hook. Here is a general example of how you can use the useForm hook to modify form data:

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

const EditPage = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>  
 Name:  
 <input {...register("name")} />  
 </label>  
 <label>  
 Surname:  
 <input {...register("surname")} />  
 </label>  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

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

const EditPage = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>  
 Name:  
 <input {...register("name")} />  
 </label>  
 <label>  
 Surname:  
 <input {...register("surname")} />  
 </label>  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

In this example, the onFinishHandler function combines the name and surname fields into a fullName field before submitting the form data. However, to delete a field from the form data, you would need to modify the onFinishHandler function to remove the field from the data object before calling onFinish. Unfortunately, the provided extracts do not contain a specific example of how to delete a field from the form data before submission. For more detailed information, you may want to refer to the refine documentation (https://refine.dev/docs/guides-concepts/forms/#modifying-data-before-submission). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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