CODEWITHSUNDEEP
javascriptreactjstypescriptformsformik
Micha
Micha

Reputation: 257

Formik setFieldValue of element in array dynamically

We have a Formik form with translations. The initialValue looks like this:

{
  // other stuff here like id, createdAt, etc.
  translations: [
   {
     languageCode: 'de',
     name: 'German',
   },
   {
     languageCode: 'fr',
     name: 'French',
   },
   {
     languageCode: 'it',
     name: 'Italian',
   }
  ]
}

selectedLanguage is equal to the currently selected language 'de' | 'fr' | 'it'. Then we loop over the availableLanguages and create and input field for each of it like so:

{
    languages.map((lang, ind) => (
        <div key={ind}>
            {selectedLanguage === lang && (
                <FormField>
                    <Input
                        name="Topic"
                        value={
                            values.translations?.find(
                                elm => elm.languageCode === lang
                            )?.name || ""
                        }
                        onChange={(v: React.ChangeEvent<HTMLInputElement>) => {
                            // Doesn't work
                            setFieldValue(
                                `${
                                    values.translations?.find(
                                        elm => elm.languageCode === lang
                                    ).name
                                }`,
                                v.target.value
                            );
                        }}
                    />
                </FormField>
            )}
        </div>
    ));
}

How do you dynamically set the name in the values array of the language that is being changed?

Thanks

Upvotes: 4

Views: 12410

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10161

For me below worked:

setFieldValue(`translations[${index}].name`, v.target.value)

Upvotes: 0

Micha
Micha

Reputation: 257

Solution was pretty simple:

<FormField key={index}>
  <Input
    value={(values.translations && values.translations[index].name) || ''}
    onChange={(v: React.ChangeEvent<HTMLInputElement>) =>
      setFieldValue(`translations.${index}.name`, v.target.value)
    }
    onBlur={() => setFieldTouched(`translations.${index}.name`, true)}
  />
</FormField>

Upvotes: 8

Related Questions