How to translate the menu navbar in core ui react?

Question

I am using the admin template for react : coreui. To translate my labels in the component, I am using react-intl.

I would like to translate the navbar which is a simple array like that :

    export default {
  items: [
    {
        title: true,
        name: 'ESSAI DOM',
    },
    {
        name: 'Schools',
        url: '/schools',
        icon: 'fa fa-university'
    },
.... other items...
  ],  
};

My translations are in a json like that (example for 'french'):

{
    "Schools.Schools.title": "Ecoles"
}

In this example, I would like to write something like :

    {
     name : some_function(languageId, 'Schools.Schools.title'),
     .....
}

How can I do that?

Answer 1

I found the solution like that :

    export default {
  items: [
    {
        name : <FormattedMessage id="Navigation.home" defaultMessage="Home" />,
        url: '/',
        icon: 'fa fa-home'
    },
    {
        name : <FormattedMessage id="Navigation.schools" defaultMessage="Schools" />,
        url: '/schools',
        icon: 'fa fa-university'
    },
  ],  
};

I did not know we can manipulate React component outside a class.