How to set default value of React Select input from an async fetch response

[cliffordp]

The only way I've found to get defaultValues working is if the function is outside the React component and it's a hard-coded value or something from the global window object.

However, I need to set a value for a React Select field from an async fetch() response and it's not working even though it's in the same format as the defaultValues hard-coded one is.

I've been at this for a long while so any pointers would be really great. tyvm!

===

Because of having to be outside the component, I can't use React hooks like React Query so I just did a straight fetch()

[bluebill1049]

have you tried by just using setValue and with Controller?

[cliffordp]

For sure. It fires the function (since it has a console.log) but it doesn't actually set the value.

[bluebill1049]

can you provide a simple CSB?

[cliffordp]

Correction, I see defaultValue as a Controller property but not setValue at https://react-hook-form.com/api#Controller

Here's my start: https://codesandbox.io/s/rhf-react-select-setvalue-98ns4?file=/src/index.js
Notice the // Works: type of comments

Find "getReactSelectDefault" in the code.

[bluebill1049]

i think you should use reset({...getValues(), {xxxx} })

[cliffordp]

Reset is part of Controller?

[bluebill1049]

yes.

[cliffordp]

Sorry, I'm not following... so in my sandbox... go from this:

<Controller
              as={ReactSelect}
              options={options}
              name="ReactSelect"
              isClearable
              control={control}
              defaultValue={getReactSelectDefault()}
            />

to this?

<Controller
              as={ReactSelect}
              options={options}
              name="ReactSelect"
              isClearable
              control={control}
              reset({...getReactSelectDefault(), {xxxx} })
            />

[bluebill1049]

no, sorry I misunderstood your question and confused you. just reset the whole form at the useEffect with reset

[cliffordp]

So upon initial form loading, reset entire form? What's the useEffect dependency? Have a sandbox link?

[bluebill1049]

after your request is resolved

reset({
  ...getValues(),
  xxxx // your select updated value
})

[cliffordp]

Sorry I'm needing extra help here :(

I updated my CSB link as far along as I could get it but no dice.
I found the reset example at https://react-hook-form.com/api#reset but that's for resetting the entire form and I'm just trying to set the default value for a single ReactSelect field whenever the form loads, not to change someone's existing input if already touched.

Thanks much for the extra hand-holding here.

[bluebill1049]

yes, you can omit any of the formState changes.

[cliffordp]

I get that for reset's args, but I'm not even getting that far along. Would you please look at the CSB and correct it for me?

[bluebill1049]

i can, can you fix the CSB, i will take a look later during lunch break

[cliffordp]

the useEffect snippet was doing all that - no error now that it's commented out

[bluebill1049]

this is what you mean: https://codesandbox.io/s/rhf-react-select-setvalue-v0u1z?file=/src/index.js?

[cliffordp]

omg tyvm!

[bluebill1049]

all good :)

[cliffordp]

Out of curiosity, why does using an async function (vs non-async) cause the following error?

Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

[bluebill1049]

because react need to know it's a controlled or uncontrolled during the render

[cubecleveland]

HI Guys,

Im struggline with this as it seems it should be a simple implementation.
Also trying to implement setting the option in the async after the fetch.......
Im not using a controller .
Here is my code:

const loadOptions = async (inputValue, callback) => {
let i = await Site.search({name: inputValue}).then(e => e.data)
return i;
}
<AsyncSelect
// styles={customStyles}
loadOptions={loadOptions}
ref={ref}
defaultOptions
isMulti
isDisabled={isAllSites}
getOptionLabel={e => e.name}
getOptionValue={e => e.id}
closeMenuOnSelect={false}

                  defaultValue={values ??? what should go in here}
              />

[bluebill1049]

you should use defaultValues at the useForm.