react-hooks-form dependent fields with Material UI TextField

user_9157874 0
Viewed 1531

With react-hooks-form I am trying to update one field based on another field value. The error I am facing is that my value is not registered in the data object.

This is my code:

const { handleSubmit, control  } = useForm({});
const [dateValue, setDateValue] = useState()

const onSubmit = (data) => {console.log(data.week)} \\ undefined


   <form
          className={classes.root}
          autoComplete="on"
          onSubmit={handleSubmit(onSubmit)}
        >
                <Controller
                  name="date"
                  control={control}
                  defaultValue={props.operation === 'edit' ? props.values.date : null}
                  render={({ field: { onChange, value }, fieldState: { error } }) => (
                    <TextField
                      id="date"
                      type="date"
                      label="date"
                      value={value}
                      className={classes.textField}
                      onChange={(event) => {
                        onChange(event.target.value); 
                        setDateValue(event.target.value);
                      }}
                      error={!!error}
                      helperText={error ? error.message : null}
                      InputLabelProps={{
                        shrink: true,
                      }}
                    />
                  )}
                  rules={{ required: 'Date is required' }}
                />


 <Controller
                        name="week"
                        control={control}
                        defaultValue=""
                        render={({ field: { onChange, value }, fieldState: { error } }) => (
                            <TextField
                                id="week"
                                type="text"
                                className={classes.textField}
                                label="week"
                                disabled={true}
                                value={dateValue}
                                onChange={onChange}
                                error={!!error}
                                helperText={error ? error.message : null}
                            />
                        )
                    />

</form>

Finally, my week value is the result of a function which returns a string containing week - year concatenation.

The value is updated in the TextField, but it is not registered in the data object. Any idea what am I missing?

react-hook-form material-ui react-hooks reactjs
1 Answers

On the onChange handler of the date field you are updating only the state of dateValue and not the state of the form itself.

You have 2 options:

  1. in the onChange handler of the date field call the setValue method you get from useForm

  2. watch the value of the date field const date = watch('date') and have a useEffect to update the value of the week field:

const {watch, setValue} = useForm()

const date = watch('date')

useEffect(() => {
  const calculateWeekValue = () => {...//}
  setValue('week', calculateWeekValue(date))
}, [date, setValue])
user_25830130
Related