I've been learning react with typescript for a while and ran into a problem.
My prop onChangeHandler takes a function to change properties in values in formik.
<Formik<FormModel>
initialValues={{
favorite: false
...
}}
onSubmit={(values) => {
...
}}
validate={(values) => {
...
}}
>
{({ handleSubmit, values, handleChange, setFieldValue, errors }) => {
const checkboxOnChange = (
e: ChangeEvent<HTMLInputElement>
) => {
setFieldValue("favorite", e.target.checked);
};
return (
<Form.Wrapper onSubmit={handleSubmit}>
...
<FormField
...
inputtype="checkbox"
inputname="favorite"
inputchecked={values.favorite}
onChangeHandler={checkboxOnChange}
/>
<Form.Button type="submit">Add task</Form.Button>
</Form.Wrapper>
);
}}
</Formik>
In my FormField compoentent file is:
type FormFieldTypes = {
fieldtype: "text" | "textarea" | "date" | "select" | "checkbox";
...
inputtype: string;
inputname: string;
inputchecked?: boolean;
onChangeHandler: (
e:
| React.ChangeEvent<HTMLInputElement>
| React.ChangeEvent<HTMLTextAreaElement>
| React.ChangeEvent<HTMLSelectElement>
) => void;
...
};
const FormField = ({
fieldtype,
inputtype,
inputname,
inputvalue,
inputchecked,
onChangeHandler,
...
}: FormFieldTypes) => {
const input = () => {
switch (fieldtype) {
...
case "checkbox":
return (
<Input
name={inputname}
type={inputtype}
checked={inputchecked}
onChange={onChangeHandler}
/>
);
default:
return null;
}
};
return (
<Field fieldtype={fieldtype} ...>
{input()}
...
</Field>
);
};
export default FormField;
`
my question is why am I getting error "Type '(e: ChangeEvent <HTMLInputElement>) => void' is not assignable to type '(e: ChangeEvent <HTMLInputElement> | ChangeEvent <HTMLTextAreaElement> | ChangeEvent <HTMLSelectElement>) => void'. " if I have implemented ChangeEvent <HTMLInputElement> and if checkbox is input and what do i need to change in the code to make it work.
