admin-on-rest "Translate is not a function" after following example in documentation

Question

After following the i18n example in the documentation, I tried to insert that example in my code, like this:

import React, { Component } from 'react';
import {
    List,
    Datagrid,
    TextField,
    NumberField,
    DateField,
    Create,
    Edit,
    SimpleForm,
    TextInput,
    SelectInput,
    SelectArrayInput,
    NumberInput,
    DateInput,
    EditButton,
    DisabledInput,
    TabbedForm,
    FormTab,
    ReferenceManyField,
    BooleanInput,
    ViewTitle,
    translate
} from 'admin-on-rest';
import { Card, CardHeader, DropDownMenu, MenuItem } from 'material-ui';

class MyComponent extends Component {

   constructor(props) {
       super(props);

       //State for each DropDownMenu
       this.state = {
           tableValue: null,
           operationTypeValue: null
       }
   }

   handleValues = (label, event, index, value) => {
       switch(label) {
           case 'operation.table':
               this.setState({tableValue: value});
               break;
           case 'operation.type':
               this.setState({operationTypeValue: value});
               break;
           default:
               break;
       }
   }

   render() {
       const { translate } = this.props;

       return (
           <Card>
               <ViewTitle title={translate('resources.datasources.operation.title')}/>
               <CardHeader subtitle={translate('resources.datasources.operation.info')} />
               <DropDownMenu name="operation.table" value={this.state.tableValue} onChange={this.handleValues.bind(this, "operation.table")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.table')} label={translate('resources.datasources.operation.table')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
                   <MenuItem value={2} primaryText="table2" label="table2" />
                   <MenuItem value={3} primaryText="table3" label="table3" />
               </DropDownMenu>
               <br/>
               <DropDownMenu name="operation.type" value={this.state.operationTypeValue} onChange={this.handleValues.bind(this, "operation.type")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.type')} label={translate('resources.datasources.operation.type')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
               </DropDownMenu>
           </Card>
       );
   }
}

export default translate(MyComponent);

As you can see, this is the same as the example in the documentation, adapted for a stateful component.

However, when I start my application, this error occurs:

TypeError: translate is not a function

What's more strange is the inconsistency between versions. In version 1.3.3, I had no problems seeing this rendered component; whereas in version 1.4 this happens.

Any clue what this problem might be?

Best,

Answer 1

I solved the issue.

After all, the issue is not from the component itself but the translate function wasn't defined in props but in a property called translate.

I fixed the file where MyComponent is called and the issue is now solved.

Thanks for the help from all of you.