I have this Select component:
type SelectProps = {
title: string;
name: string;
items: string[];
onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
defValue: string;
};
const Select: FC<SelectProps> = ({ title, name, items, onChange, defValue }) => {
return (
<>
<label htmlFor={name}>
{title}:
</label>
<select name={name} onChange={onChange} defaultValue={defValue}>
{items.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
</>
);
};
and I'm handling onChange with this function:
const onThemeChange = (e: ChangeEvent<HTMLSelectElement>) => {
const theme = e.target.value;
setTheme(theme)
};
...
<Select
title='Theme'
defValue={props.theme}
name='theme'
items={['light', 'dark']}
onChange={onThemeChange}
/>
My setTheme
action creator accepts argument with type 'light' | 'dark'
, so I'm getting an error:
Argument of type 'string' is not assignable to parameter of type '"light" | "dark"'
What is the best way to solve this issue?
const theme = e.target.value as "light" | "dark";
theme
state defined on your component?setTheme
is an action dispatch from the redux store?export const setTheme = (theme: 'light' | 'dark'): ActionTypes => { return { type: SET_THEME, theme, }; };