title: React-Intl how to switch locale and messages from variable
body: <p>I'm trying to figure out how to change language using React-Intl. This is my first React App and it has been made with create-react-app, I'm not using Redux nor Flux.</p>
  
  <p>In my index.js I have the following code:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TodoApp from './components/TodoApp';
  import registerServiceWorker from './registerServiceWorker';
  import './index.css';
  
  // Bootstrap CSS libraries
  import 'bootstrap/dist/css/bootstrap.css';
  import 'bootstrap/dist/css/bootstrap-theme.css';
  
  import { IntlProvider, addLocaleData } from 'react-intl';
  import intlEN from 'react-intl/locale-data/en';
  import intlES from 'react-intl/locale-data/es';
  import intlMessagesES from './i18n/locales/es.json';
  import intlMessagesEN from './i18n/locales/en.json';
  
  addLocaleData([...intlEN, ...intlES]);
  
  /* Define your translations */
  let i18nConfig = {
      locale: 'es',
      messages: intlMessagesES
  };
  
  let changeLanguage = (lang) =&gt; {
      i18nConfig = { locale: lang, messages: intlMessagesEN };
      return i18nConfig;
  }
  
  ReactDOM.render(
      &lt;IntlProvider locale={ i18nConfig.locale } key={ i18nConfig.locale } messages={ i18nConfig.messages }&gt;
          &lt;TodoApp onChangeLanguage={changeLanguage} /&gt;
      &lt;/IntlProvider&gt;,
      document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>TodoApp is sending a string on 'lang' parameter by props (i.e.: 'es' or 'en'), when I change <strong>i18nConfig</strong> nothing seems to change with IntlProvider. My thought was that change my <strong>i18nConfig</strong> variable then all my app would change language as well.</p>
  
  <p>I have FormattedMessages in TodoApp and my two JSON messages are filled like this: </p>
  
  <pre><code>// i18n/locales/en.json
  {
    "footer.add.placeholder": "Enter a name ...",
    "footer.add.priority0.text": "No priority",
    "footer.add.priority1.text": "Priority 1",
     ...
  }
  </code></pre>
  
  <p>Do you know what am I missing on my code ?? Maybe I have not understand something right about React-Intl. Any advice will be helpful, thank you.</p>