translate returns an object instead of a string

when used outside the return statement of the React class render function, the react-translate-component’s translate function returns an object where a string should be returned. code snippet within a React.creatClass: render:function() { var menusLns = this.getFooterMenu(); //getting a json file that describes my menus var i, j; var menus = []; var content;

    for (i = 0; i < menusLns.length; ++i) {
        var Menu = {};
        Menu.title = menusLns[i].id;
       Menu.items = "";
        for (j = 0; j < menusLns[i].menuitem.length; ++j) {
            var tagTitle = menusLns[i].menuitem[j].value;
            console.log("item tagTitle = " + tagTitle); // Ok
            var text = this._e("gui", tagTitle); // we are not within the return statement...

// this._e comes from a mixin lib in which we have _e: require(‘react-translate-component’).translate, // this syntax works nicely in another react component, but within its return statement console.log(“item text = " + text); // KO: object Object var link = menusLns[i].menuitem[j].link; var item = '\u003cli\u003e\u003ca title=”’ + tagTitle + ‘" href="’ + link + ‘"\u003e’ + text + ‘\u003c/a\u003e\u003c/li\u003e\n’; console.log("menu item: " + item); Menu.items += item; } menus.push(Menu); }

    return (
        <  ....  >
    );
}

[martinandert]

How can I update counterpart translations when user select locale in switcher component?

You could listen to Counterpart’s locale change event in your component’s componentDidMount lifecycle method. Example (untestet):

var MyComponent = React.createClass({
  /* ... */

  componentDidMount: function() {
    counterpart.onLocaleChange(this.localeChanged);
  },

  componentWillUnmount: function() {
    counterpart.offLocaleChange(this.localeChanged);
  },

  localeChanged: function(newLocale) {
    this.setState({ 
      placeholder: counterpart.translate('foo.email.placeholder')
    });
  },

  render: function () {
    var i18n_placeholder = this.state.placeholder;

    return (
      <div>
        <input type="email" placeholder={i18n_placeholder} />
      </div>
    );
  },
});

[neemzy]

Thanks for the tip! Might be useful to put that somewhere in the README (FAQ or so), as it is a quite common use case.

In my case, I built on top of your tip to have Counterpart.onLocaleChange set the current locale in the state of my root component. When the locale changes, it rerenders itself and all its children, thus triggering Counterpart’s native translate function again with the current locale. Any thoughts? Would you fear a performance pitfall with such a global solution?