title: React-Intl how to switch locale and messages
body: <p>I'm new to reactJS and using multi-language support.I would like to get the </p>
  
  <blockquote>
    <p>locale variable from Header drop-down(By default - 'English' if user selects 'Spanish'.I would like to re-render the entire site content to be Spanish.I have messages configured for English/Spanish where you'll see that in import. I've confused where to get dynamic Locale variable. Also I'm not using redux/flux architecture.</p>
  </blockquote>
  
  <p>Code below</p>
  
  <h2>index.js</h2>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";
  import {addLocaleData,IntlProvider } from "react-intl";
  import en from "react-intl/locale-data/en";
  import es from "react-intl/locale-data/es";
  import registerServiceWorker from "./registerServiceWorker";
  
  
  import messages from "./components/messages/messages"
  import {flattenMessages} from "./components/utils/utils";
  
  addLocaleData([...en,...es]);
  let locale = (navigator.languages &amp;&amp; navigator.languages[0])
                || navigator.language
                || navigator.userLanguage
                || 'en-us';
  
  ReactDOM.render(
      &lt;IntlProvider locale={locale} messages={flattenMessages(messages[locale])}&gt;
        &lt;App /&gt;
      &lt;/IntlProvider&gt;,
      document.getElementById('root')
  );
  registerServiceWorker();
  </code></pre>
  
  <h2>header.js</h2>
  
  <pre><code>import React, {Component} from "react";
  import {Navbar, Nav, NavItem, MenuItem, NavDropdown} from "react-bootstrap";
  import {IndexLinkContainer} from "react-router-bootstrap";
  import {Icon,Image,Dropdown} from "semantic-ui-react";
  import injectTapEventPlugin from "react-tap-event-plugin";
  import Auth from "../modules/Auth";
  import {Redirect} from "react-router-dom";
  import AuthService from "../service/AuthService";
  import Logo from "../../Assets/images/instapassLogo.png"
  import {Link} from "react-router-dom";
  import {FormattedMessage} from 'react-intl';
  
  
  let languageOptions = [ { key: 'en-us', text: 'English', value: 'en-us' }, { key: 'en-es', text: 'Español', value: 'en-es' }];
  /* Define your default translations */
  let i18nConfig = {
      locale: 'en-us'
  };
  class Header extends Component {
  
      constructor(props) {
          super(props);
          injectTapEventPlugin();
          this.state = { show: false,  redirect:false,user: Auth.getUser(),uri:null};
          this.logout = this.logout.bind(this);
          this.setLanguage = this.setLanguage.bind(this);
      }
  
      componentDidMount() {
          let userObj = JSON.parse(Auth.getToken());
          const self = this;
          if(userObj !== null){
              AuthService.viewProfile(userObj.token).then(function(response){
                  self.setState({
                      uri: response.uri,
                  });
              }).catch(function (error) {
                  alert(error);
              });
          }
      }
  
  
      onChangeLanguage =(e, { value }) =&gt; {
          this.setState({ locale: value });
          i18nConfig.locale = this.state.locale;
      };
  
      logout = () =&gt; {
          const self = this;
  
          const location = {
              pathname: '/',
              state: { from: {pathname: '/'} }
          };
          Auth.deauthenticateUser();
          self.setState({ redirect: true});
          // change the current URL to /
          self.props.history.replace(location);
      };
  
      render() {
          let user = Auth.getUser() &amp;&amp; JSON.parse(Auth.getUser());
          let uri = this.state.uri;
          const { from }  = { from: { pathname: '/' }};
          const { redirect } = this.state;
          if (redirect) {
              return (
                  &lt;Redirect to={from}/&gt;
              )
          }
          return (
              &lt;IntlProvider key={ i18nConfig.locale } locale={ i18nConfig.locale } {flattenMessages(messages[locale])}&gt;
               &lt;Navbar collapseOnSelect fixedTop fluid&gt;
                  &lt;Navbar.Header&gt;
                      &lt;Link to="/"&gt;
                          &lt;Navbar.Brand&gt;
                              &lt;img src={Logo} alt="logo" style={{width: 164, height: 50}}
                                   className="img-responsive"/&gt;
                          &lt;/Navbar.Brand&gt;
                      &lt;/Link&gt;
                      &lt;Navbar.Toggle/&gt;
                  &lt;/Navbar.Header&gt;
                  &lt;Navbar.Collapse&gt;
                      &lt;Nav&gt;
                          &lt;IndexLinkContainer to="/"&gt;
                              &lt;NavItem eventKey={1}&gt;
                                  &lt;span className="navItem"&gt;
                                     &lt;FormattedMessage id="menu.home"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                          {Auth.isUserAuthenticated() ? (
                          &lt;IndexLinkContainer to="/profile"&gt;
                              &lt;NavItem eventKey={2}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.profile"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;) : ''}
                          &lt;IndexLinkContainer to="/location"&gt;
                              &lt;NavItem eventKey={3}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.locations"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                          &lt;IndexLinkContainer to="/wallet"&gt;
                              &lt;NavItem eventKey={4}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.wallet"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                          {Auth.isUserAuthenticated() ? (
                          &lt;IndexLinkContainer to="/ticket"&gt;
                              &lt;NavItem eventKey={5}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.myTickets"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;) : ''}
                          {/*&lt;IndexLinkContainer to="/favorites"&gt;*/}
                              {/*&lt;NavItem eventKey={6}&gt;*/}
                                  {/*&lt;span className="navItem"&gt;
                                  &lt;FormattedMessage id="menu.favorites"/&gt;
                                  &lt;/span&gt;*/}
                              {/*&lt;/NavItem&gt;*/}
                          {/*&lt;/IndexLinkContainer&gt;*/}
                          &lt;IndexLinkContainer to="/help"&gt;
                              &lt;NavItem eventKey={7}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.help"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                          &lt;IndexLinkContainer to="/contact"&gt;
                              &lt;NavItem eventKey={8}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.contactUs"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                          &lt;IndexLinkContainer to="/terms"&gt;
                              &lt;NavItem eventKey={9}&gt;
                                  &lt;span className="navItem"&gt;
                                      &lt;FormattedMessage id="menu.terms"/&gt;
                                  &lt;/span&gt;
                              &lt;/NavItem&gt;
                          &lt;/IndexLinkContainer&gt;
                      &lt;/Nav&gt;
                      &lt;Nav pullRight&gt;
                          &lt;NavItem&gt;
                              &lt;Dropdown floating inline options={languageOptions} defaultValue='en-us' onChange={this.onChangeLanguage}/&gt;
                          &lt;/NavItem&gt;
                      &lt;/Nav&gt;
                      &lt;Nav pullRight&gt;
                          &lt;NavDropdown eventKey={10}
                                       title={
                                           &lt;div className="pull-left"&gt;
                                               {
                                                   user ?
                                                   (&lt;span className="mui--bg-color-black"&gt;
                                                       { uri ?  &lt;Image src={uri} avatar /&gt; :&lt;Icon name='user'/&gt;}
                                                       &lt;FormattedMessage id="auth.hello"/&gt; &amp;nbsp;{user &amp;&amp; user.firstName}
                                               &lt;/span&gt;) :
                                                   &lt;span className="mui--bg-color-black"&gt;&lt;Icon name='user'/&gt;
                                                       &lt;FormattedMessage id="auth.hello"/&gt;
                                                   &lt;/span&gt;
                                               }
  
                                           &lt;/div&gt;
                                       }
                                       id="basic-nav-dropdown"&gt;
                              {Auth.isUserAuthenticated() ? (
                                  &lt;span className="mui--text-center"&gt;
                                          &lt;MenuItem eventKey={13} href="/profile"&gt;&lt;Icon name='setting'/&gt;
                                              &lt;b&gt;&lt;FormattedMessage id="auth.account"/&gt;&lt;/b&gt;&lt;/MenuItem&gt;
                                          &lt;MenuItem divider/&gt;
                                          &lt;MenuItem eventKey={12} href="/" onClick={() =&gt; this.logout()}&gt;
                                              &lt;Icon name='sign out'/&gt;
                                              &lt;b&gt;
                                                   &lt;FormattedMessage id="auth.signOut"/&gt;
                                              &lt;/b&gt;
                                          &lt;/MenuItem&gt;
                                      &lt;/span&gt;
                              ) : (
                                  &lt;span className="mui--text-center"&gt;
                                          &lt;MenuItem eventKey={11} href="/signup"&gt;
                                              &lt;b&gt;
                                               &lt;FormattedMessage id="auth.register"/&gt;
                                             &lt;/b&gt;
                                          &lt;/MenuItem&gt;
                                          &lt;MenuItem divider/&gt;
                                          &lt;MenuItem eventKey={14} href="/login"&gt;
                                              &lt;b&gt;  &lt;FormattedMessage id="auth.signIn"/&gt;&lt;/b&gt;
                                          &lt;/MenuItem&gt;
                                      &lt;/span&gt;
                              )}
                          &lt;/NavDropdown&gt;
                      &lt;/Nav&gt;
                  &lt;/Navbar.Collapse&gt;
              &lt;/Navbar&gt;
  
          );
      }
  }
  export default Header;
  </code></pre>
  
  <p>Could you please provide some tips how I can re-endered the entire site content by changing the Language dropdown to "Spanish" or vice-versa.(I'm not using redux/flux).</p>