react hook form - setValue with nested

[novaknole]

Describe the bug

interface FormInputs {
  config: Config;
}

const {
      control,
      handleSubmit,
      watch,
      setValue,
      getValues,
} = useForm<FormInputs>();

setValue('config', config);

<Controller
      name="config.test"
      control={control}
      defaultValue={''}
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <InputField
          label=""
          onInputChange={onChange}
          value={value.toString()}
          height="46px"
          width={window.innerWidth > 700 ? '50%' : '100%'}
          placeholder={'350s'}
        />
    )}
  />

The problem is that inputField doesn't show the config.test value. This gets resolved if
I don't use setValue('config', config); and directly do setValue('config.test', config.test); but doing this is just horrible as I have so many variables and I don't wanna be calling setValue all the time.

[dvdprr6]

Can you provide a little more details of the problem you are facing?

Why do you need to use setValue? You can set the value for config.test in defaultValue, like this defaultValue={config.test} in your Controller

[novaknole]

@dvdprr6

Thanks for the follow up..

The idea is that I make an API request which gives me object with 8 key values. and 2 of these keys have nested objects inside.

Now, I want to show an edit form with these key values.

so I use setValue to set each input field.

The problem is that i don't want to be using separate setValue for each field. One workaround is to loop through my object and call setValue separately, but I'd need recursive loop, which I also don't want.

Isn't there any other way ?

[dvdprr6]

Please post an example of how this object would look like including the nested objects. It would help me visualize a possible solution.

[novaknole]

{
delay: 200,
data: {
    amount: 15,
    test: "30"
},

data2: {
    amount: 40,
    test: "35"
},

good: 123,
bad: 456
}

Now, in my form, I have 7 input fields and as you can see above, we also have 7 . So each input contains each thing.

Currently, As I am doing now,

// config is the data returned from REST API.
setValue(`config.delay`, config.delay)
setValue(`config.data.amount`, config.data.amount)
setValue(`config.data.test`, config.data.test)
.... and so on

I don't want to be doing so many setValues.

doing

setValue(`config`, config)

<Controller
                name="config.delay"
                control={control}
                defaultValue=""
                render={({
                  field: { onChange, value },
                  fieldState: { error },
                }) => (
                  <InputField
                    label=""
                    onInputChange={onChange}
                    value={value}
                    height="46px"
                    width={window.innerWidth > 700 ? '540px' : '100%'}
                    placeholder={'350s'}
                  />
                )}
              />

doesn't work.

[dvdprr6]

I was able to get it to work using defaultValues which is one of the input parameters of useForm. Please note I am using react-hook-form version 7.4.0

function App() {
  const { control, handleSubmit } = useForm({
    defaultValues: { config: { delay: 200, data: { amount: 15, test: "30" } } }
  });

  const onSubmit = (form) => console.log(form);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="config.delay"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.amount"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.test"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <input type="submit" />
    </form>
  );
}

Here is a screenshot:

The submit would look like this:

I hope this helps!

[novaknole]

@dvdprr6 Thanks a lot for the nice explanation.

I think we are almost there. Now as I said, defaultValues that I have to put come from REST API... which means useForm needs to be written in useEffect. is this a good approach ?

[dvdprr6]

You would have to make the request in your parent component and then mount the form.

The example below, the setConfig simulates yours API request and when you recieve the request you can use setOpen to mount the form

function App() {
  const [config, setConfig] = useState({});
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setConfig({
      config: { delay: 200, data: { amount: 15, test: "30" } }
    });
    setOpen(true);
  }, []);

  return (
    <div>{open ? <MyForm {...config} /> : <div></div>}</div>
  )
}

const MyForm = (config) => {
  console.log(config);
  const { control, handleSubmit } = useForm({
    defaultValues: { ...config }
  });

  const onSubmit = (form) => console.log(form);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="config.delay"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.amount"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.test"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <input type="submit" />
    </form>
  );
};

Assuming your API request it wrapped in a promise, perhaps your useEffect in your parent component would look something like this:

  useEffect(() => {
    const fetchConfig = async () => await getConfig()

    fetchConfig.then(() => {
      setConfig({
        config: { delay: 200, data: { amount: 15, test: "30" } }
      });
      setOpen(true)
    })
  },[])

[dvdprr6]

I re-looked at your setValue problem. Did you try to wrap it in the useEffect? Because it actually works by using the setValue in the useEffect.

function App() {


  const { control, handleSubmit, setValue } = useForm({});

  useEffect(() => {
    setValue("config", { delay: 200, data: { amount: 15, test: "30" } });
  }, []);

  const onSubmit = (form) => console.log(form);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="config.delay"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.amount"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <Controller
        name="config.data.test"
        control={control}
        render={({ field: { value, onChange } }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <input type="submit" />
    </form>
  );
}

[bluebill1049]

thanks very much @dvdprr6 for the help! ❤️ i will take a look at it after work as well.

[bluebill1049]

can you provide a codesandbox?

[harveyappleton]

@bluebill1049 Hey all, having a similar problem I think. I've put together a codesandbox: https://codesandbox.io/s/eloquent-banach-zho9o?file=/src/App.tsx

If I try:
setValue(`a.${objectThing.id}.value` as const, "abc");
This doesn't work (TS error on "abc")

If I try:
setValue(`a.${stringThing}.value` as const, "abc");
It works.

But we don't know the id in advance, and will come from API.
So not sure how to get round this?

Please see TS error on Codesandbox (or attached screenshot).

Thanks

[bluebill1049]

hey @harveyappleton thanks for the codesandbox, at the moment TS is not supported that just yet until 4.3.1

I know this is not the best,

setValue(`a.${objectThing.id}.value` as `a.0.value`, "abc");

but this is the current workaround until 4.3.1 gets released.

[harveyappleton]

@bluebill1049 thanks for this, yeah not an ideal workaround but if we have to wait for TS v4.3.1 then that's cool! Thank you for your speedy response 🎉

[bluebill1049]

no worries @harveyappleton FYI: this is what we after: microsoft/TypeScript#43361

[DavidJayBrady]

Several years late, but you can put your multiple values in objects and set that value.

const { data } = useMyQuery(); // {amount: 5, test: "10"}
setValue("data", data);

You'd still need to call setValue on other parts of the form if you want to change things outside of data, but this was enough in my case. Also, my form methods didn't include setValues so that didn't work for me. You can access rhf's nested data structure using dot notation, for example

watch("data.amount")