Why is the react hook form on capturing the data on submit

Question

I am trying to receive the value of the props after the button has been clicked but i am getting it to be undefined. I want to see the years of service and profession information as per the selection.

return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Box display="flex" flex={1} flexDirection="column">
        <Box padding={1}>
          <FormControl>
            <Controller
              control={control}
              id="isUserEmployed"
              name="isUserEmployed"
              defaultValue={isUserEmployed.toString()}
              render={({ onChange }) => (
                <RadioGroup
                  onChange={({ target: { value } }) => {
                    onChange(value);
                  }}
                  defaultValue="hasjob"
                >
                  <FormControlLabel
                    value="hasjob"
                    control={<Radio color="primary" size="small" />}
                    label="Has Job"
                  />
                  <Box>
                    <Autocomplete
                      disablePortal
                      fullWidth
                      options={(() => {
                        if (profession === "Teacher") return jobTeacher;
                        if (profession === "Developer") return jobDeveloper;
                      })()}
                      getOptionLabel={(option) => option.value.toString()}
                      renderInput={(params) => (
                        <TextField {...params} variant="standard" />
                      )}
                      onChange={onProfessionChange}
                      autoHighlight
                      clearOnEscape
                    />
                  </Box>
                  <FormControlLabel
                    value="noJob"
                    control={<Radio color="primary" size="small" />}
                    label="No Job"
                  />
                </RadioGroup>
              )}
            />
          </FormControl>
          <Button
            size="large"
            color="primary"
            variant="contained"
            type="submit"
          >
            Enter
          </Button>
        </Box>
      </Box>
    </form>
  );
}

https://codesandbox.io/s/small-dew-kdmmfu?file=/src/App.tsx

I am using react-hook-form version 6

Answer 1

You are destructuring data in onSubmit function and hence undefined is logged in console. Remove destructuring and change onSubmit function as below.

const onSubmit = (data : any) => {
    console.log("Here");
    console.log(data);
  };

yearsOfService is tracked with useState hook not with react-hook-form. So, data won't have this value.

If you want RHF to track yearsOfService, try moving AutoComplete outside RadioGroup, render it with a Controller. Also pass it's default value to useForm hook