Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – setValue not working with Controller in react-hook-form

I am using react-hook-form with MUI components. To use the Select component, I have wrapped it in the Controller as it can’t be registered directly. Everything is working but setValue.

Here is the Code:

const { register, control, handleSubmit, setValue, formState: { errors } } = useForm();

  useEffect(() => {
     setValue('category',10)
  }, [setValue]);

<Controller
  name="category"
  control={control}
  render={({ field }) => (
    <>
      <TextField
        {...field}
        select
        label={'Item Category'}
      >
        <MenuItem value={''} disabled>Select Category</MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>

    </>
  )}
  />

I am expecting my Selector category to get updated on the initial load.

Update: One thing I found is that actually the value is being set on the load but not being rendered on the UI.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the answer myself:

    Needed to set the defaultValue either in the controller or in the useForm default value.

      <Controller
    name="category"
    control={control}
    defaultValue='' //Must set this otherwise setValue won't trigger re-render
    rules={constraints.category}
    render={({ field }) => (..myComponent..)}
  />

  2. 0 
    import { useForm } from 'react-hook-form';
import { TextField, MenuItem } from '@mui/material';

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

  useEffect(() => {
    setValue('category', 10); // Set initial value
  }, [setValue]); // Only setValue dependency needed

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        name="category"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            select
            label={'Item Category'}
            defaultValue={10} // Set initial value directly
          >
            <MenuItem value={''} disabled>
              Select Category
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </TextField>
        )}
      />
      {/* ... other form fields */}
      <button type="submit">Submit</button>
    </form>
  );
}
    • We only need the setValue dependency in the useEffect hook as it triggers the re-render when the form state changes.
    • The defaultValue prop is set directly on the TextField component, providing the initial value and eliminating the need for the useEffect hook. This simplifies the code and avoids unnecessary complexity.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search