title: How to set i18n default translation language in React
body: <p>I have two translations in my app using i18n translator and I'm trying with no success to set the default language.</p>
  <p>The preferred language (the default language) will be set at registration and will come from the database.</p>
  <p>Where can I create some kind of logic that will tell i18n what is the language coming from the backend?</p>
  <p>The value will show something like this:</p>
  <pre><code>const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'
  </code></pre>
  <p>The i18n configuration file looks something like this:</p>
  <pre><code>import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  
  import Backend from 'i18next-http-backend';
  import LanguageDetector from 'i18next-browser-languagedetector';
  
  const Languages = ['en', 'de'];
  
  i18n
  
    .use(Backend)
  
    .use(LanguageDetector)
  
    .use(initReactI18next)
  
    .init({
      fallbackLng: 'en',
      debug: true,
      whitelist: Languages,
  
      interpolation: {
        escapeValue: false
      }
    });
  
  
  export default i18n;
  </code></pre>
  <p>Should be something written under <code>.use(Backend)</code>?
  This is the first time using i18n so any hints would be appreciated.</p>
  <p>This is my component where I need the translation. In it, I've tried to set the index of <code>i18n.languages</code> based on the language preferred, but this is not working:</p>
  <pre><code>import React from 'react'
  import { useTranslation } from 'react-i18next';
  
  
  export default function Dashboard() {
      //the logged user
      const currentUser = AuthService.getCurrentUser();
      //value from database
      const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'
  
      //translation
      const { t, i18n } = useTranslation();
  
      function handleClick(lang) {
          i18n.changeLanguage(lang);
      }
  
      const current = i18n.languages[defaultLang === 'en' ? 0 : 1]
  
  
      return (
          &lt;&gt;
          &lt;div className={styles.languageSelector}&gt;
          &lt;a 
            onClick={ () =&gt; handleClick('en') }
            style={{ fontWeight: current === &quot;en&quot; ? 800 : 400}}
          &gt;
            EN
          &lt;/a&gt;
          &lt;a 
            onClick={ () =&gt; handleClick('de') }
            style={{ fontWeight: current === &quot;de&quot; ? 800 : 400}}
          &gt;    
            DE
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;{t('translated.stuff')}&lt;/div&gt;
        &lt;/&gt;
      )
  }
  </code></pre>