rare-sapphire•9mo ago

Changing form data with Material Design

Can I see an example of a component that uses the Material UI create component to change how the form data is formatted before it's submitted to the api?

6 Replies

kapa.ai•9mo ago

Hi @quandrix_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, here is an example of a component that uses the Material UI <Create> component to change the form data before it's submitted to the API. This example combines the user's name and surname into a fullName before submitting the form data.

import React from "react";  
import { HttpError } from "@refinedev/core";  
import { Create } from "@refinedev/mui";  
import { useForm } from "@refinedev/react-hook-form";  
import { Button, Box, TextField } from "@mui/material";  
  
type FormValues = {  
 name: string;  
 surname: string;  
};  
  
export const UserCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 refineCore: { onFinish },  
 handleSubmit,  
 } = useForm<FormValues, HttpError, FormValues>();  
  
 const handleSubmitPostCreate = (values: FormValues) => {  
 const { name, surname } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...value,  
 fullName,  
 });  
 };  
  
 return (  
 <Create  
 saveButtonProps={{  
 ...saveButtonProps,  
 onClick: handleSubmit(handleSubmitForm),  
 }}  
 >  
 <Box component="form">  
 <TextField  
 {...register("name", {  
 required: "This field is required",  
 })}  
 name="name"  
 label="Name"  
 error={!!errors.name}  
 helperText={errors.name?.message}  
 />  
 <TextField  
 {...register("surname", {  
 required: "This field is required",  
 })}  
 name="surname"  
 label="Surname"  
 error={!!errors.surname}  
 helperText={errors.surname?.message}  
 />  
 </Box>  
 </Create>  
 );  
};

import React from "react";  
import { HttpError } from "@refinedev/core";  
import { Create } from "@refinedev/mui";  
import { useForm } from "@refinedev/react-hook-form";  
import { Button, Box, TextField } from "@mui/material";  
  
type FormValues = {  
 name: string;  
 surname: string;  
};  
  
export const UserCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 refineCore: { onFinish },  
 handleSubmit,  
 } = useForm<FormValues, HttpError, FormValues>();  
  
 const handleSubmitPostCreate = (values: FormValues) => {  
 const { name, surname } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...value,  
 fullName,  
 });  
 };  
  
 return (  
 <Create  
 saveButtonProps={{  
 ...saveButtonProps,  
 onClick: handleSubmit(handleSubmitForm),  
 }}  
 >  
 <Box component="form">  
 <TextField  
 {...register("name", {  
 required: "This field is required",  
 })}  
 name="name"  
 label="Name"  
 error={!!errors.name}  
 helperText={errors.name?.message}  
 />  
 <TextField  
 {...register("surname", {  
 required: "This field is required",  
 })}  
 name="surname"  
 label="Surname"  
 error={!!errors.surname}  
 helperText={errors.surname?.message}  
 />  
 </Box>  
 </Create>  
 );  
};

This code is extracted from the Refine FAQ documentation (https://refine.dev/docs/faq/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

rare-sapphire•9mo ago

@kapa.ai Could you gvie me another example using the below code as reference? The langauges-known skillmodifer component is returning an object like { id: bool } where I just want it to return an array of strings

``javascript
export const RaceCreate: React.FC<IResourceComponentsProps> = () => {
    const {
        saveButtonProps,
        refineCore: { formLoading },
        register,
        control,
        formState: { errors },
        handleSubmit
    } = useForm<IRace, HttpError, IRace>();

    const dataTransform = (data: FieldValues) => {
        
    };

    return (

        <Create
            isLoading={formLoading}
            saveButtonProps={{
                ...saveButtonProps,
                onClick: handleSubmit(dataTransform),
            }}
        >
            <Box
                component="form"
                sx={{ display: "flex", flexDirection: "column" }}
                autoComplete="off"
            >
               <SkillModifier
                    control={control}
                    skill={"languages"}
                    name={

languages-known`} modifier={"languages"} limiter={false} />

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain information on how to transform the object returned by the SkillModifier component into an array of strings. However, you would typically use the Object.keys() method to convert the object keys into an array. If the object is { id: bool }, and you want an array of ids where the bool is true, you could use something like this:

const dataTransform = (data: FieldValues) => {
    const languagesKnown = data['languages-known'];
    const result = Object.keys(languagesKnown).filter(key => languagesKnown[key]);
    return {...data, 'languages-known': result};
};

const dataTransform = (data: FieldValues) => {
    const languagesKnown = data['languages-known'];
    const result = Object.keys(languagesKnown).filter(key => languagesKnown[key]);
    return {...data, 'languages-known': result};
};

This is just a general JavaScript solution and might need to be adjusted based on the actual structure of your data. For more specific guidance, I recommend checking the Refine documentation (https://refine.dev/docs) or asking for help in the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

other-emerald•9mo ago

Hello @quandrix_ please check our docs here: https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

FAQ | refine

How can I change the form data before submitting it to the API?