Currently, I am working on implementing an Autocomplete field using react-hook-form. Everything seems to be functioning correctly, but I have encountered a TypeScript error:
The provided object does not match the expected type 'AutocompleteProps<{ value: MeasuringSystem; label: string; }, undefined, true, undefined, "div">'.
The 'value' property types are incompatible.
The type 'string | { value: MeasuringSystem; label: string; }' is not assignable to type '{ value: MeasuringSystem; label: string; } | undefined'.
The type 'string' is not assignable to type '{ value: MeasuringSystem; label: string; } | undefined'.ts(2322)
Below is the relevant code snippet:
export enum MeasuringSystem {
Imperial = 'IMPERIAL',
Metric = 'METRIC',
}
interface MeasuringSystemOption {
value: MeasuringSystem;
label: string;
}
interface DefaultValues {
firstName: string | undefined;
lastName: string | undefined;
trailName: string | undefined;
measuringSystem: MeasuringSystemOption;
address1: string | undefined;
address2: string | undefined;
city: string | undefined;
state: string | undefined;
country: string | undefined;
}
const measuringSystemOptions = [
{ value: MeasuringSystem.Imperial, label: 'Imperial (lbs, oz)' },
{ value: MeasuringSystem.Metric, label: 'Metric (kg, g)' },
];
const Profile: React.FC = () => {
...other code
const defaultSystem = measuringSystemOptions.find(
opt => opt.value === currentUser?.measuringSystem
);
const {
control,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: yupResolver(validationSchema),
mode: 'onSubmit',
reValidateMode: 'onBlur',
defaultValues: {
firstName: currentUser?.firstName ?? '',
lastName: currentUser?.lastName ? currentUser.lastName : '',
measuringSystem: defaultSystem || '',
address1: currentUser?.address1 ?? '',
address2: currentUser?.address2 ? currentUser.address2 : '',
city: currentUser?.city ? currentUser.city : '',
state: currentUser?.state ? currentUser.state : '',
country: currentUser?.country ? currentUser.country : '',
},
});
useEffect(() => {
const resetUser = {
firstName: currentUser?.firstName ?? '',
lastName: currentUser?.lastName ?? '',
address1: currentUser?.address1 ?? '',
address2: currentUser?.address2 ?? '',
city: currentUser?.city ?? '',
state: currentUser?.state ?? '',
country: currentUser?.country ?? '',
measuringSystem: defaultSystem ?? '',
} as any;
if (currentUser) reset(resetUser);
}, [currentUser]);
return (
<div>
<Controller
control={control}
name="measuringSystem"
render={({ field }) => (
<Autocomplete // <-- TS Error
{...field}
autoComplete
disableClearable
fullWidth
options={measuringSystemOptions}
onChange={(e, v) => field.onChange(v)}
isOptionEqualToValue={(option, value) =>
option.value === value.value
}
renderInput={(params: AutocompleteRenderInputParams) => (
<TextField
{...params}
inputRef={field.ref}
error={!!errors?.measuringSystem}
helperText={(errors?.measuringSystem as any)?.message}
label="Preferred Measuring System"
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<PublicIcon
color={
errors?.measuringSystem ? 'error' : 'inherit'
}
/>
</InputAdornment>
),
}}
/>
)}
/>
)}
/>
</div>
);
};
I understand the nature of the error, but I am unsure how to resolve it. Any guidance on this?