localization not working in drawer container menu items

[Daniela]

Hello,

 

I am able to set the localization service to the message in english but when I change the dropdown value to spanish the message remains in english, do you have a workaround for this?

const DrawerContainer = (props: any) => {

 

constlocalizationService = useLocalization();

    const locales: LocaleInterface[] = [

        {

          language: "en-US",

          locale: "en",

          name: "English",

        },

        {

          language: "es-ES",

          locale: "es",

          name: "Spanish",

        },

        {

          language: "sv",

          locale: "sv",

          name: "Swedish",

        },

      ];

 const [currentLocale, setCurrentLocale] = React.useState(

        locales[0]

    );

  const [expanded, setExpanded] = React.useState(true);

  const [drawerExpanded, setDrawerExpanded] = React.useState(true);

  const [items, setItems] = React.useState([

    {

      text: localizationService.toLanguageString('custom.personalInfo', ''),

      route: '/profile'

    },

    {

      separator: true

    },

    {

      text: 'Sites',

      route: '/sites'

    },

    {

      separator: true

    },

    {

      text: 'My Compressed Air System',

      route: '/mycasystem'

    },

    {

      text: Array(25).fill('\xa0').join('') + 'Compressors',

      route: '/mypage'

    },

    /* {

      text: 'My Compressor',

      route: '/mycomp'

    }, {

      text: 'Compare',

      route: '/compare'

    },

    {

      text: 'Dashboard',

      route: '/dashboard'

    },

    {

      text: 'Customers',

      route: '/customers'

    } */

  ]);

 const selected = setSelectedItem(props.location.pathname);

 

return<div>

<LocalizationProvider language={currentLocale.language}>

            <IntlProvider locale={currentLocale.locale}>

<DropDownList

                                value={currentLocale}

                                textField="name"

                                onChange={(e) => {

                                    setCurrentLocale(e.target.value);

                                }}

                                data={locales}

                            />

          <div className="custom-toolbar">

        <Button icon="menu" onClick={handleClick}  />

        <span  className="title" id="burguer-menu">{localizationService.toLanguageString('custom.menu', '')}</span>

      </div>

    <Drawer expanded={expanded} position={'start'} mode={'push'} width={300} items={items.map(item => ({

      ...item,

      selected: item.text === selected

    }))} onSelect={onSelect}>

      <DrawerContent>

        {props.children}

      </DrawerContent>

   

</Drawer>

            </IntlProvider>

          </LocalizationProvider>

  </div >;

};

export default withRouter(DrawerContainer);

[Konstantin Dikov]

Hello Daniela,

The issue that you are facing is due to the fact that the useLocalization is not initialized in the context of LocalizationProvider. In this particular setup, you have access to the messages, so you can use them directly. The useLocalization should be used to pass the localization to inner components:

• https://stackblitz.com/edit/react-hmh6xj?file=app%2FDrawerRouterContainer.jsx

With the above in mind, if you use the LicalizatoinProvider to wrap the main component and then use internally the useLocalization, then you will be able to use the approach that you have in your example.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Daniela]

I cannot wrap the items in the localiztion provider because it is part of the state and I cannot wrap state into that compoent, please provide an example localizing the drawer from telerik.

 

Thanks,

[Konstantin Dikov]

Hi Daniela,

As I have mentioned, the useLocalization works in the context of LocalizationProvider, which means that if you want to use the useLocalization hook, it needs to be initialized in a component that is wrapped within a LocalizationProvider. Since the "items" collection in your example is in the state, the useLocalization will not have any effect, because it is outside of the LocalizationProvider context. 

With the above in mind, please wrap your inner content (including the "items" collection) in a nested component where you can use useLocalization in the context of the LocalizationProvider:

• https://stackblitz.com/edit/react-hmh6xj-qhui3x?file=app%2FDrawerRouterContainer.jsx

[Daniela]

but I cannot put the state inside the render function right ? so I cannot wrap the items collection in a nested component. if yes, could you provide an example with items in such component please.

[Konstantin Dikov]

Please refer to the example in my last reply, where I have introduced another component, where you can place the Drawer and the items (the items can be part of the state of that nested component).