React.js i18n dynamically change language

Question

I am using "i18n" for multilingual support in my "React.js" project. I have a "Switch" button in "Navbar" component. and when that button is clicked I add current language information to "lcoalstore". And when I check in browser, language option works dynamically in "localstore". My problem is I want to change app language every time user changes language. But that doesn't happen. Here is my i18n code:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import messages_az from "./translations/az.json";
import messages_en from "./translations/en.json";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: messages_en,
  },
  az: {
    translation: messages_az,
  },
};




i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: localStorage.getItem("lang"),
    detection: {
      order: ["localStorage", "lang"],
      lookupQuerystring: "lang",
      lookupLocalStorage: "lang",
      caches: ["localStorage"],
    },
    keySeparator: false, // we do not use keys in form messages.welcome
    fallbackLng: "az", // use az if detected lng is not available
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

Answer 1

I fixed That!

Here is my swtich button :

<Menu.Item key="lang" className=" navMenuItem">
        <Switch
          onChange={langSwitch}
          className="langSwitch"
          checkedChildren="En"
          unCheckedChildren="Az"
          defaultChecked
        />
      </Menu.Item>

So, i Added this code to my langSwitch() function :

function langSwitch(checked) {
    console.log(`switch to ${checked}`);
    if (checked) {
      i18n.changeLanguage("en");
    } else {
      i18n.changeLanguage("az");
    }
  }