diff --git a/web/src/components/cross-language-form-field.tsx b/web/src/components/cross-language-form-field.tsx index bfc8ce4e1f..6465e7c57a 100644 --- a/web/src/components/cross-language-form-field.tsx +++ b/web/src/components/cross-language-form-field.tsx @@ -6,12 +6,12 @@ import { } from '@/components/ui/form'; import { MultiSelect } from '@/components/ui/multi-select'; import { cn } from '@/lib/utils'; -import { t } from 'i18next'; import { toLower } from 'lodash'; +import { useMemo } from 'react'; import { useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -const Languages = [ +export const Languages = [ 'English', 'Chinese', 'Spanish', @@ -25,10 +25,18 @@ const Languages = [ 'Dutch', ]; -export const crossLanguageOptions = Languages.map((x) => ({ - label: t('language.' + toLower(x)), - value: x, -})); +export function useCrossLanguageOptions() { + const { t } = useTranslation(); + + return useMemo( + () => + Languages.map((x) => ({ + label: t('language.' + toLower(x)), + value: x, + })), + [t], + ); +} type CrossLanguageItemProps = { name?: string; @@ -43,6 +51,7 @@ export const CrossLanguageFormField = ({ }: CrossLanguageItemProps) => { const { t } = useTranslation(); const form = useFormContext(); + const crossLanguageOptions = useCrossLanguageOptions(); return ( { if (languageShown && isEmpty(lang)) { - form.setValue( - buildFieldNameWithPrefix('lang', prefix), - crossLanguageOptions[0].value, - { - shouldValidate: true, - shouldDirty: true, - }, - ); + form.setValue(buildFieldNameWithPrefix('lang', prefix), Languages[0], { + shouldValidate: true, + shouldDirty: true, + }); } }, [form, lang, languageShown, prefix]); }