I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's 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
This implementation utilizes react-hook-form version 6