C2LC-23: Use react-intl injectIntl() directly on component class(es)

Description

Use react-intl injectIntl() directly on component class(es) to avoid creation of anonymous functions in render().

The following are sketches of a couple of approaches.

Either a component with a name something like IntlContainer

  • Contains internationalization supports, messages, and current language state
  • App is its only child component
render() {
    return (
        <IntlProvider
                locale={this.state.language}
                messages={messages[this.state.language]}>
            <App>
        </IntlProvider>
    );
}

We can then use injectIntl() directly in App.js:

export default injectIntl(App);

Or, move the localizable user interface out of App

  • App would contain internationalization supports, messages, current language state, and other application-wide state
  • Any UI that needs localization is in child components of App

In this model, App would contain the <IntlProvider> container (as now) and children would contain:

export default injectIntl(WhateverChildComponent);

Resources