diff --git a/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx b/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx index 04deb573..f5eb1aaa 100644 --- a/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx +++ b/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { contentLanguageKeyMap } from '../../constants/contentLanguage'; import { Form } from 'antd'; import { useTranslation } from 'react-i18next'; @@ -28,23 +28,20 @@ const CreateMultiLingualFormItems = ({ children, ...rest }) => { const { calendarContentLanguage, form, name, data, required, validations, dataCy, placeholder, entityId } = rest; const { t } = useTranslation(); - let isFieldDirty = {}; // to keep track of dirty fields + // State to track dirty fields + const [isFieldDirty, setIsFieldDirty] = useState({}); + let dataCyCollection = []; let placeholderCollection = []; - calendarContentLanguage.forEach((language) => { - const lanKey = contentLanguageKeyMap[language]; - const fieldName = name.concat([lanKey]); - isFieldDirty[lanKey] = form.isFieldTouched(fieldName); - }); - const formItemList = calendarContentLanguage.map((language) => { + const lanKey = contentLanguageKeyMap[language]; const dependencies = calendarContentLanguage // dependencies for each form item .filter((lan) => lan !== language) .map((lan) => [name, contentLanguageKeyMap[lan]]); dataCyCollection.push(`${dataCy}${language.toLowerCase()}`); - placeholderCollection.push(placeholder[contentLanguageKeyMap[language]] ?? ''); + placeholderCollection.push(placeholder[lanKey] ?? ''); const validationRules = required // validation rules for each form item ? [ @@ -65,11 +62,21 @@ const CreateMultiLingualFormItems = ({ children, ...rest }) => { return (