React-i18next: Translations are not reflecting even after changing language

[nikhil4326]

Below is my i18n config file.

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import trans_en from './i18n/en.json';
import trans_es from './i18n/es.json';
i18n
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {
      en: {
        translations:
          trans_en
      },
      es: {
        translations:
          trans_es
      }
    },
    fallbackLng: 'en',

    // have a common namespace used around the full app
    ns: ['translations'],
    defaultNS: 'translations',

    keySeparator: false, // we use content as keys

    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ','
    },

    react: {
      wait: true
    },
    isInitialSSR: false
  });

export default i18n;

With above configurations translations are reflecting only with reload.
I want it to reflect as value of language get changed.(without reload).
Thanks in advance. please help me to solve this problem

[jamuhl]

could you make your sample reproducable on a copy of https://www.webpackbin.com/bins/-KvzrVDG30KTlYqGNL6u

[jamuhl]

seems to work in the webpackbin sample...so must be something else not your config...

[jamuhl]

please use this bin with updated react-i18next as base: https://www.webpackbin.com/bins/-KvzvUPFsBVI_74Jll99

[nikhil4326]

https://www.webpackbin.com/bins/-Kw-QQr6pmGZmSnzTVZj

[nikhil4326]

Let me know if u get the fix

[jamuhl]

Your Template:

import React,{Component} from 'react';
import { Trans } from 'react-i18next';

class Template  extends Component{


  render(){
    return(
      <div>
        <Trans>title</Trans>
      </div>
    )
  }
}

export default Template

does not get any change via prop thus does not rerender on changeLanguage.

a) wrap it into translate hoc
b) pass down t from parent component
c) use I18n component

[nikhil4326]

Hey sorry, But can u please add those changes in sample project so that i can understand easily.

[jamuhl]

sorry was an issue with pureComponent in react-i18next Trans component

https://www.webpackbin.com/bins/-Kw-lKP6C-EHoCY5KK04

solved in [email protected]

[nikhil4326]

This works .. Thanks man

[jamuhl]

Awesome...sorry for the troubles.

[nikhil4326]

Hey Jamuhl, Thanks for efforts and you can close this issue.