Strings stored in constant values do not change on different language selection

[ayush-shta]

I have some stings that are stored in a separate constant files.

I am able to set and see those strings on my page when the language is set to initial value. However, after I update the selected language using: strings.setLanguage(language), the strings stored in the constants file are not changed for that respective language.

Do I have to do anything specific to get the behavior I want, or is it not possible with this library?

[stefalda]

Hi, you should provide some code to test your specific situation, otherwise I'm sorry but I'm unable to provide you with an answer...

[ayush-shta]

Hello @stefalda ,

For example,

My util file for localization is like this: lang.js

export const strings = new LocalizedStrings({
  en: english,
  fr: french,
  it: italian,
});

export function getString(key, ...args) {
  const str = strings.formatString(strings[key], ...args);
  return str;
}

export function updateLanguage(language) {
  strings.setLanguage(language);
}

I have a constant file like this: pages.js

import { getString } from '../util/lang';

export const PageNames = {
  Home: getString('home'),
  Info: getString('info'),
  SelectTiming: getString('selectTiming'),
};

It's corresponding language file for English is something like this: en.js

const language = {
  // PageNames
  home: 'Home,
  info: 'Info',
  selectTiming: 'Select Timing',
 ....
}

Similarly its French file for language is this: fr.js

const language = {
  // PageNames
  home: 'fr Home fr,
  info: 'fr Info fr',
  selectTiming: 'fr Select Timing fr',
 ....
}

I use the pageName constant in my react component file as:

import { PageNames } from '../constants/pages';
...
<NavTab
    .....
    label={PageNames.Home}
      />

When I change my language from english to french using strings.setLanguage(language), the strings stored in the constants file do not reflect the change in the app for that respective language. It still shows the default language english.

However, the strings directly used in the react component files do work properly as intended.

[stefalda]

Have you tried to do setState ()?

[ayush-shta]

Where do I need to setState to? I do not want to set my components to initial state. Also, I am tracking the state of a selected language

[stefalda]

You can just set a state without changing anything just to produce a redraw

[ayush-shta]

Force redraw doesn't work for me. For now as a workaround, I'm setting the strings as functions and calling them as functions at the place of use. This does solve the problem but does not look optimal.

pages.js

import { getString } from '../util/lang';

export const PageNames = {
  Home: () => getString('home'),
  Info: () =>getString('info'),
  SelectTiming: ()=> getString('selectTiming'),
};

my component file

import { PageNames } from '../constants/pages';
...
<NavTab
    .....
    label={PageNames.Home()}
      />

[peterLam2]

hello,ayush-shta , I have the similar issue , had you figure this out or using the same approach as above