I have a custom Input component that I am using for Formik input validation. It looks like this:
export const FieldInput: React.FunctionComponent<FieldInputProps> = ({ handleChange, handleBlur, fieldType, placeholderText, value, hidePassword, hidePasswordIcon, togglePassword, icon,}) => { return (<Item rounded style={styles.personalListItem}><Icon name={icon} /><Input autoFocus={true} placeholder={placeholderText} keyboardType="default" onChangeText={handleChange(fieldType)} onBlur={handleBlur(fieldType)} value={value} secureTextEntry={hidePassword} /> {togglePassword ? (<Icon name={hidePasswordIcon} onPress={togglePassword} /> ) : null}</Item> );};I am using it like this in my screens:
<Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput handleChange={handleChange} handleBlur={handleBlur} value={values.phoneNumber} fieldType="phoneNumber" icon='phone' placeholderText='49152901820' /><ErrorMessage name="phoneNumber" render={(msg) => (<Text style={styles.errorText}>{msg}</Text> )} /></View><View style={styles.buttonContainer}><Button onPress={handleSubmit}> Search</Button></View></View> )}</Formik>Although it functions well, I still get a TypeScript error on handleChange and handleBlur that:
Type '{ (e: ChangeEvent<any>): void; <T = string | ChangeEvent<any>>(field: T): T extends ChangeEvent<any> ? void : (e: string | ChangeEvent<any>) => void; }' is not assignable to type '(e: string) => undefined'. Types of parameters 'e' and 'e' are incompatible. Type 'string' is not assignable to type 'ChangeEvent<any>'I don't understand the error. The field inputs are supposed to be strings and I don't think I should change ChangeEvent's type to string. 'any' is also not a good option. How can I fix this?