React forms hook with Material UI Select input not working

Question

How de Select below the Textfield should load:

How it actually loads:

My Select component created using Material UI + React form hook doesn't load the default value. (The component should start with a value selected, that is provided once in the following part of the code)

  const clientData = await api.client.getClient(id);
  reset({ ...clientData });

It happens inside a useEffect that should run once, when the page is loaded and the id is gotten from the url. The Select code:

export const ClientSourceSelect = ({
      control,
      clientSources,
      getValues,
      errors,
    }: ClientSourceSelectProps) => (
      <FormControl fullWidth>
        <Controller
          control={control}
          name="clientSourceId"
          render={({ field: { onChange, value } }) => (
            <>
              <TextField label={value}></TextField>
              <Select onChange={onChange} value={value}>
                {clientSources.map((clientSource) => (
                  <MenuItem key={clientSource.id} value={clientSource.id}>
                    {clientSource.name}
                  </MenuItem>
                ))}
              </Select>
            </>
          )}
        />
      </FormControl>
    );

I created the TextField over the Select to test if the value is really loaded, and the value is really displayed over the Select (a uuid corresponding to clientSource.id), so the value itself exists but the Select starts blank. Using the inspector, the li elements have a correct data-value attribute with their corresponding id.

useForm: const { register, control, getValues, handleSubmit, reset, formState: { errors }, } = useForm(); — Eric
– Eric, Commented Dec 23, 2022 at 21:13
ClientSourceSelect: <ClientSourceSelect control={control} clientSources={clientSources} errors={errors} getValues={getValues} /> — Eric
– Eric, Commented Dec 23, 2022 at 21:15
The ClientSourceSelect is wrapped in a Box component(I'm using styled components): <FormWrapper component="form" onSubmit={handleSubmit(updateClientData)}> — Eric
– Eric, Commented Dec 23, 2022 at 21:17

Arjun · Accepted Answer · 2022-12-23 21:20:25Z

1

Based on the documentation, you can provide default values when calling useForm() hook.

const { control } = useForm({
  defaultValues: {
    clientSourceId: <your default id>
  }
});

Your working code can be found in this sandbox: https://codesandbox.io/s/young-sun-7ee953

answered Dec 23, 2022 at 21:20

Arjun

1,2491 gold badge3 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eric Over a year ago

The default clientSourceId depends on an API call, for this reason I didn't define it in useForm. So in this case, I should transform the values returned by useForm in states and define them just after the API call promise is resolved?

Arjun Over a year ago

In that case you can use setValue('clientSourceId', 'your value'); also when your api returned.

Arjun Over a year ago

You can find the modified code in same sandbox using setvalue().

Eric Over a year ago

after adding defaultValue on form creation, the problem was solved. Tks!

Sanka Sanjeeva · Accepted Answer · 2025-03-16 04:06:33Z

0

Setting the default value to the Select component works for me, but not in the useForm

<Select
  defaultValue={defaultValueFromAPI}
  value={value}
  onChange={onChange}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

answered Mar 16 at 4:06

Sanka Sanjeeva

3,86830 silver badges34 bronze badges

Collectives™ on Stack Overflow

React forms hook with Material UI Select input not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related