sensitive-blue
sensitive-blue7mo 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
kapa.ai7mo 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
kapa.ai7mo ago
<@223544018016010240> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue
sensitive-blue7mo 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
kapa.ai7mo 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
kapa.ai7mo ago
<@223544018016010240> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire7mo ago
FAQ | refine
How can I change the form data before submitting it to the API?