How I can get and set value by id from API?

[Bartyee]

Hello everybody :)
First I would like to thank you for library, very useful and simple to use 👍
At the moment I have problem with react-select and my API. In our application we are using only ID for post and get values.
How I can get only id from select? At the moment on submit I have values like:

const formData = {
 currency: {label: "USD", id: 4 }
}

I want to have:

const formData = {
 currency: 4
}

Here is my code:

<Controller
          name="product"
          rules={{ required: true }}
          register={register}
          control={control}
          defaultValue={""}
          render={({ value, onChange }) => (
            <ReactSelect
              getOptionLabel={(option) => option.name}
              placeholder={""}
              id="form-input-product"
              isDisabled={editmode}
              required={true}
              getOptionValue={(option) => option.id}
              isClearable
              options={context.products}
              value={value}
              onChange={(selected: any) => {
                onChange(selected);
              }}
            />
          )}
        />

At the moment Im using something like that:

export const getReactSelectFormValues = (formData: any) => {
  for (let key in formData) {
    if (typeof formData[key] === "object") {
      formData = {
        ...formData,
        [key]: formData[key].id || formData[key].map((el: any) => el.id),
      };
    }
  }
  return formData;
};

Thanks :)

[ebonow]

Greetings @Bartyee ,

I haven't fully caught up on react hook form, but it seems like you could use the onChange prop of the field to update the form value per the Controller documentation here:

Applying this to the code above, I would guess that the following should work for you.

<Controller
          name="product"
          rules={{ required: true }}
          register={register}
          control={control}
          defaultValue={""}
          render={({ value, onChange, field }) => (
            <ReactSelect
              getOptionLabel={(option) => option.name}
              placeholder={""}
              id="form-input-product"
              isDisabled={editmode}
              required={true}
              getOptionValue={(option) => option.id}
              isClearable
              options={context.products}
              value={value}
              onChange={(selected: any) => {
                onChange(selected);
                field.onChange(selected.value);
              }}
            />
          )}
        />

[Bartyee]

Greetings @Bartyee ,

I haven't fully caught up on react hook form, but it seems like you could use the onChange prop of the field to update the form value per the Controller documentation here:

Applying this to the code above, I would guess that the following should work for you.

<Controller
          name="product"
          rules={{ required: true }}
          register={register}
          control={control}
          defaultValue={""}
          render={({ value, onChange, field }) => (
            <ReactSelect
              getOptionLabel={(option) => option.name}
              placeholder={""}
              id="form-input-product"
              isDisabled={editmode}
              required={true}
              getOptionValue={(option) => option.id}
              isClearable
              options={context.products}
              value={value}
              onChange={(selected: any) => {
                onChange(selected);
                field.onChange(selected.value);
              }}
            />
          )}
        />

https://codesandbox.io/s/fancy-hooks-ev78o?file=/src/FormTwo.jsx
Doesnt work :/

[ebonow]

@Bartyee Looks like a mixup on my part perhaps between v6 and v7 as value and onChange seem like properties on the field parameter.

Here's a code example using v7 that seems to be working:
https://codesandbox.io/s/react-select-hook-form-wwgul

<Controller
  name="product"
  rules={{ required: true }}
  register={register}
  control={control}
  defaultValue={""}
  render={({ field: { value, onChange } }) => (
    <ReactSelect
      getOptionLabel={(option) => option.name}
      placeholder={""}
      id="form-input-product"
      isDisabled={editMode}
      required={true}
      getOptionValue={(option) => option.id}
      isClearable
      options={countries}
      value={value}
      onChange={(selected) => {
        onChange(selected.value);
      }}
    />
  )}
/>

[klinki]

I'm hitting the same problem :( I created issue for it #4973