Formik Translatable Input

Viewed 43

Im building a form where some fields may have different values per language. Im using Formik and Fields to build the form. Is there any way i can use an object as the Field value?

My form looks like this:

<Formik
    enableReinitialize={true}
    initialValues={values}
    validationSchema={ValidationSchema}
    onSubmit={(values) => {
      save(values);
    }}
  >
    {({ handleSubmit }) => (
      <>
        <Form className="form form-label-right">
          <div className="form-group row">
            <div className="col-lg-4">
              <Field
                name="name"
                component={TranslatableInput}
                placeholder="Name"
                label="Name"
              />
            </div>
          </div>
          ...

And my field looks like this:

export function TranslatableInput({
 field, // { name, value, onChange, onBlur }
form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
  label,
  withFeedbackLabel = true,
  customFeedbackLabel,
  type = "text",
  labelInline = false,
  ...props
}) {
    const [lang, setLang] = useState(defaultLang)
    const changeLang = (e) => setLang(e.target.value)
    const onValueChange = (e) => {
        var value = {...field.value}
        value[lang] = e.target.value
        e.target.value = value
        field.onChange(e)
    }
  return (
    <>
      <div>
          <select onChange={changeLang} value={lang}>
              {langs.map(({key, name}) => <option value={key}>{name}</option>)}
          </select>
        <input
          type="text"
          value={field.value[lang] ? field.value[lang] : ''}
          name={field.name}
          onChange={onValueChange}
          {...props}
        />
      </div>
    </>
  );
}

I got an error on the field onChange because im trying to set the value to an object. Is there any standard for this? Or am i missing something?

0 Answers
Related