mui-react-hook-form-plus icon indicating copy to clipboard operation
mui-react-hook-form-plus copied to clipboard

why values are removed from object after button click?

Open naveennsit opened this issue 1 year ago • 1 comments

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://codesandbox.io/p/sandbox/ress-cs8fd4?file=%2Fsrc%2FApp.tsx%3A13%2C1-56%2C2

steps to repr

  1. Run application .. see OBJECT Value { "firstName": "", "lastName": "", "sex": "" }
  2. Click Button see Object { "sex": "Male" }
  3. firstName. and lastName key removed from object why ?

enter image description here

naveennsit avatar May 07 '24 05:05 naveennsit

Sorry for the delay but will fix it, Thank you

adiathasan avatar Oct 27 '24 09:10 adiathasan