Using formik with typescript (Ionic) - reactjs

Question

I try to use Formik library for validating forms however I have trouble passing onChange function to my input components.
Here is the main component:
import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '#ionic/react';
import { useFormik } from 'formik';
import BasicInput from '../components/form/BasicInput';
const Login: React.FC = () => {
const validate = (values: {
name: string;
}) => {
const errors = {};
if (!values.name) {
}
return errors;
}
const formik = useFormik({
initialValues: {
name: ''
},
validateOnChange: false,
validateOnBlur: false,
validate,
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
})
const {
name
} = formik.values
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Login</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<BasicInput
id="name"
placeholder={"Your name"}
onChange={formik.handleChange}
/>
</IonList>
<div>
<IonButton onClick={handleLogin}>
Done
</IonButton>
</div>
</IonContent>
</IonPage>
)
}
export default Login;
And here is my input component:
import React from 'react';
import { IonInput, IonItem } from '#ionic/react';
const BasicInput: React.FC<{
id: string,
placeholder: string,
onChange: () => any
}> = (props) => {
return (
<IonItem>
<IonInput
placeholder={props.placeholder}
onIonChange={props.onChange}
>
</IonInput>
</IonItem>
)
}
export default BasicInput;
Error im getting is "Type '(eventOrPath: string | ChangeEvent) => void | ((eventOrTextValue: string | ChangeEvent) => void)' is not assignable to type '() => any'." on my onChange prop.
How to properly declare it for TS?

Answer 1

The message indicates where is the problem.
In BasicInput, you are defining a prop onChange: () => any. But clearly, the function that is going to be called will need to receive the new input value as a parameter and does not need to return anything, so your prop definition should be something like this:
{
// ...
onChange: (newValue: string) => void;
}
But, if you hover your mouse over the onIonChange prop of <IonInput />, you can see that the passed function does not receive a string as a parameter!
This is the full definition: https://github.com/ionic-team/ionic/blob/976e68da5b030baf26dc60034ff80d8db2cff8e6/core/src/components.d.ts#L4137
It actually fires a CustomEvent. Having this event e, you can access the input value via e.target.value.
The full code becomes this:
import React from 'react';
import { IonInput, IonItem } from '#ionic/react';
const BasicInput: React.FC<{
id: string,
placeholder: string,
onChange: (newValue: string) => void
}> = (props) => {
return (
<IonItem>
<IonInput
placeholder={props.placeholder}
onIonChange={(e) => props.onChange(e.target.value)}
>
</IonInput>
</IonItem>
)
}
export default BasicInput;