I am using below package for my demo application.
https://www.npmjs.com/package/mui-react-hook-form-plus
Above package have dependency of react-hook-form
Object key are removed after button click don’t know why ?
I am setting the value like this on button click.
const update = () => {
const data = {
person: { firstName: "", lastName: "", sex: "Male" },
};
setValues(data);
};
here is my component
export default function App() {
const defaultValues = {
person: { firstName: "", lastName: "", sex: "" },
};
const methods = useHookForm<any>({
defaultValues,
});
const { registerState, handleSubmit, getValues, setValues } = methods;
console.log(getValues());
const onSubmit = (data: any) => {
console.log(JSON.stringify(getValues(), null, 2));
};
const update = () => {
const data = {
person: { firstName: "", lastName: "", sex: "Male" },
};
setValues(data);
};
return (
<div className="App">
<HookFormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<Stack direction="row" spacing={2}>
<HookTextField
{...registerState("person.firstName")}
textFieldProps={{ label: "First Name" }}
/>
<HookTextField
{...registerState("person.lastName")}
textFieldProps={{ label: "Last Name" }}
/>
</Stack>
<button onClick={update}>set value</button>
<br />
{JSON.stringify(getValues("person"), null, 2)}
<br />
</form>
</HookFormProvider>
</div>
);
}
code
https://stackblitz.com/edit/vitejs-vite-61ya5m?file=src%2Findex.css,src%2FApp.css&terminal=dev
steps to repr
- Run application .. see OBJECT Value { “firstName”: “”, “lastName”: “”, “sex”: “” }
- Click Button see Object { “sex”: “Male” }
- firstName. and lastName key removed from object why ?
i say internally removing field why
https://github.com/adiathasan/mui-react-hook-form-plus/blob/master/src/utils/form-utils.ts