CODEWITHSUNDEEP
javascriptreactjsreact-nativeuser-interfacereact-redux
Shruti sharma
Shruti sharma

Reputation: 211

can we use component before its completely finished in other react component

I am facing one strange issue in react/Javascript My below file calls the data from backend API and assign it for translation.

import i18next from 'i18next';
import apiDelegate from '../src/components/Utils/Common/api.js';
const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');

var output;
//API call
apiDelegate.getTranslations().then((result) => {
 output = JSON.stringify(result);
 const tr_fr = 'translation: ' +JSON.parse(output) ;
alert(tr_fr);
  i18next
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      resources: {
        en: tr_fr,
      },
      fallbackLng: 'fr',
    });
  i18next.changeLanguage(navigator.language);
});

export default i18next;

Below lines is used for calling backedn API. apiDelegate.getTranslations() it returns data in the form of key value. for ex {name:"Mahima",company:"Infosys",address:"Bangalore India"} and I use these properties in my react componenet using below line.

i18n.t("name");

i18n.t("company") etc

Is it possible that these values are getting read in my component before apiDelegate() finished its execution.I mean is there a possibility code is using i18 file before its execution finished. because its not refelecting the values. instead of API if I use static files then it works perfectly.

Please help me , I am badly struggling to understand this. can it be resolved?

Upvotes: 0

Views: 122

Answers (2)

adrai
adrai

Reputation: 3168

This seems to be a duplicate of:

You may want to use i18next-http-backend: how to incorporate API data in i18next instead of static file

Upvotes: 1

windowsill
windowsill

Reputation: 3649

If you need your consumers to wait until the language has been setup, you could return a promise from this module instead. Something like:

let ready = false;

const start = () => {
  return new Promise((res) => {
    if (ready) return res(i18next);

    apiDelegate.getTranslations().then((result) => {
      output = JSON.stringify(result);
      const tr_fr = 'translation: ' + JSON.parse(output);
       i18next
         .use(LanguageDetector)
         .use(initReactI18next)
         .init({
           resources: {
             en: tr_fr,
           },
           fallbackLng: 'fr',
         });
       i18next.changeLanguage(navigator.language);
     });

     ready = true;
     return res(i18next);
  });
};

export default start;

Update: This is how I would probably use it.

export const useLanguage = () => {
  const [l, setL] = useState({i18next});

  useEffect(() => {
    apiDelegate.getTranslations().then((result) => {
      // ...
    i18next.changeLanguage(navigator.language);
    setL({i18next});
    });
  }, []);

  return l;
};

Upvotes: 1

Related Questions