Created a custom select field with Formik field and Ionic but on form submission its value is not get forwarded to the form
Below is the code:
import React from 'react';
import { IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
import { Field } from 'formik';
import './Select.scss';
const Select = ({ label, name, options, placeholder, ...rest }: any) => {
return (
<div className="form-control">
<IonLabel className="label">{label}</IonLabel>
<Field name={name}>
{({ form, field }: any) => {
const { setFieldValue } = form;
const { value } = field;
return (
<IonSelect
className="form-input"
value={value}
onIonChange={(e) => setFieldValue(name, e.target.value)}
placeholder={placeholder}
>
{options.map((option: any) => {
return (
<IonSelectOption key={option.key} value={option.value}>
{option.value}
</IonSelectOption>
);
})}
</IonSelect>
);
}}
</Field>
</div>
);
};
export default Select;
Where as Input is working fine, I have used same onIonChange event which using setFieldValue provided by formik Field
import React from 'react';
import { IonInput, IonLabel } from '@ionic/react';
import { Field } from 'formik';
import './Input.scss';
const Input = ({ label, name, placeholder, ...rest }: any) => {
return (
<div className="form-control">
<IonLabel className="form-label">{label}</IonLabel>
<Field name={name}>
{({ field, form }: any) => {
const { setFieldValue } = form;
const { value } = field;
return (
<IonInput
className="form-input"
value={value}
onIonChange={(e) => setFieldValue(name, e.target.value)}
placeholder={placeholder}
/>
);
}}
</Field>
</div>
);
};
export default Input;
It's been hard to know why it's not working with Select but work with Input.