Formik setFieldValue of element in array dynamically

Question

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

Micha · Accepted Answer · 2022-01-05 07:28:35Z

8

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>

answered Jan 5, 2022 at 7:28

Micha

2571 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Gupta · Accepted Answer · 2023-10-25 16:13:51Z

0

For me below worked:

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

answered Oct 25, 2023 at 16:13

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Collectives™ on Stack Overflow

Formik setFieldValue of element in array dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related