Localize web apps

What have i done till now

  1. Create a Dropdown for language selection
  2. Set Up the Dropdown Options
    Label: English, Value: en
    Label: Kannada, Value: kn
    Label: Hindi, Value: hi
  3. add a Event handlers on change of select1 it will run a query 'change'
  4. add a text comp text1
  5. whose value is :wave: {{ i18n.t('key') }}!

the query 'change' content are
i18n.init({
lng: 'en',
resources: {
en: {
translation: {
"key": "hello world"
}
},
kn: {
translation: {
"key": "ಹಲೋ ವರ್ಲ್ಡ್"
}
},
hi: {
translation: {
"key": "हैलो वर्ल्ड"
}
}
},
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});

const selectedLanguage = select1.value;
i18n.changeLanguage(selectedLanguage);

error t.forEach is not a function debug this error solve this by step by step

Hi @Arslan_Doddamani,

That is odd that the error is related to using t.forEach as I don't see that in your code snippet.

Maybe it is calling that method elsewhere or when i18n.init() runs, or inside the i18n.changeLanguage(selectedLanguage) :thinking:

For your use case. I would create a Variable, this will be the object that you are passing into i18n when you run the .init() method from above.

Then in your text component, you would key into this object with the language key from the dropdown.

1 Like