0

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.

0 Answers0