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?