how to dynamically import languages files data into my APP.js using react_intl

Question

i need to import the data of my selected language in index.js to app.js

My index.js

import { IntlProvider, addLocaleData } from 'react-intl'
import en from 'react-intl/locale-data/en'
import fr from 'react-intl/locale-data/fr'
import english from '../popup/localMessages/en'
import french from '../popup/localMessages/fr'
addLocaleData(...en, ...fr)

const locale =
  (navigator.languages && navigator.languages[0]) ||
  navigator.language ||
  navigator.userLanguage ||
  'en-US'

const typeOfLang = {
  en: english,
  fr: french,
}
render(
    <Provider store={store}>
      <IntlProvider locale={locale} messages={typeOfLang[locale]}>
        <Content />
      </IntlProvider>
    </Provider>,
    mountNode
  )

and my app.js

  class App extends Component {
    render() {
    const { intl } = this.props
    const { locale, messages } = this.props.intl
return(
<Button
              label={intl.formatMessage({ id: 'messages' })}
              onClick={() => this.submit('ALL')}
            />
)
}

And my en.js

 import { defineMessages } from 'react-intl'

const english = defineMessages({
  title: {
    id: 'rock',
    defaultMessage: 'read',
  },
  all: {
    id: 'same',
    defaultMessage: 'ALL',
  }


});

export default english

iam not getting the data from the langauges files in App.js button. can you please help me on this/ correct my code if possible

Answer 1

You should pass your locale data as an array in your index.js:

addLocaleData([...en, ...fr])