React-admin tab name translate - reactjs

Question

I am using React-admin and following the demo that they give out. So far everything is working except for the Tab name/title translation. I have done the translation correctly because other components that have label attribute works fine with the translation.
Translations are getting from en.js file and added to app.js according to the react-admin documentation.
Here is my code :
class TabbedDatagrid extends React.Component {
tabs = [
{ id: 'countries', name: 'root.countries.title' },
{ id: 'languages', name: 'root.languages.title' },
];
state = { countries: [], languages: [] };
static getDerivedStateFromProps(props, state) {
if (props.ids !== state[props.filterValues.status]) {
return { ...state, [props.filterValues.status]: props.ids };
}
return null;
}
handleChange = (event, value) => {
const { filterValues, setFilters } = this.props;
setFilters({ ...filterValues, status: value });
};
render() {
const { classes, filterValues, ...props } = this.props;
return (
<Fragment>
<Tabs
fullWidth
centered
value={filterValues.status}
indicatorColor="primary"
onChange={this.handleChange}
>
{this.tabs.map(choice => (
<Tab
key={choice.id}
label={choice.name}
value={choice.id}
/>
))}
</Tabs>
<Divider />
<Responsive
small={<SimpleList primaryText={record => record.title} />}
medium={
<div>
{filterValues.status === 'countries' && (
<Datagrid hover={false}
{...props}
ids={this.state['countries']}
>
<TextField source="id" />
<TextField source="name" label="root.countries.fields.name"/>
</Datagrid>
)}
{filterValues.status === 'languages' && (
<Datagrid hover={false}
{...props}
ids={this.state['languages']}
>
<TextField source="id" />
<TextField source="name" label="root.languages.fields.name"/>
</Datagrid>
)}
</div>
}
/>
</Fragment>
);
}
}
The translations seems to work everywhere else but the Tab label, What I get instead of the Title is uppercase string of this root.countries.title.
Is there a workaround or how to fix this issue?

Answer 1

You probably used <Tab/> 'directly' from material-ui.
You need to use (create) 'enhanced version' (using translate prop) of this component.
Take inspiration from menu or other translatable components.

Answer 2

You need to pass your translations to your App.js as follows :
import React from 'react';
import { Admin, Resource } from 'react-admin';
import frenchMessages from 'ra-language-french';
import englishMessages from 'ra-language-english';
const messages = {
fr: { component:{label:'test'},...frenchMessages },
en: { component:{label:'test'},...englishMessages },,
}
const i18nProvider = locale => messages[locale];
const App = () => (
<Admin locale="en" i18nProvider={i18nProvider}>
...
</Admin>
);
export default App;
than when you want to use translations inside a component, you need to connect it to the react-admin's translate function as follows :
import { TextInput, translate } from 'react-admin';
const translatedComponent = ({translate, ...props}) => {
return <TextInput label={translate('component.label')} />
}
export default translate(translatedComponent);
it is important to connect the component with translate and to get the translate function from props to get the translation work.