javascript - Formik setFieldValue of element in array dynamically - Stack Overflow

admin管理员组

文章数量:1345179

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

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

• javascript
• reactjs
• typescript
• forms
• formik

Share Improve this question Follow edited Dec 10, 2021 at 16:56 Amila Senadheera 13.3k1616 gold badges2929 silver badges4646 bronze badges asked Dec 10, 2021 at 16:15 MichaMicha 25711 gold badge33 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

For me below worked:

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

本文标签： javascriptFormik setFieldValue of element in array dynamicallyStack Overflow