Tengo el siguiente código.

 import i18next from 'i18next'; import React from 'react'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: TRANSLATIONS_EN, }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); export default i18next;

Recibo TRANSLATIONS_EN de un archivo. Ahora necesito obtener este valor de la API. así que creé debajo del componente para probar.

 import React from 'react'; import axios from 'axios'; class TransFile extends React.Component { constructor() { super(); alert('Mahima'); } componentDidMount() { alert('Mahima'); //API code . } render() { return <h2>Hi, I am a Mahima Saxena! + </h2>; } } export default TransFile;

cuando estoy importando el componente anterior en mi archivo i18 y llamando no hay salida.

 import TransFile from './TransFile'; <div> <TransFile /> </div>;

Inserté el código anterior en el archivo myi18next pero no aparece ningún resultado. ni siquiera está imprimiendo alerta. Ahora mi archivo I18 está debajo,

 import i18next from 'i18next'; import React from 'react'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js'; import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; import { TRANSLATIONS_IT } from '../public/locales/it/it.js'; import { TRANSLATIONS_ES } from '../public/locales/es/es.js'; import TransFile from './TransFile'; //I Inserted below line { <div> <TransFile /> </div>; } i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: TransFile, fr: TRANSLATIONS_FR, es: TRANSLATIONS_ES, it: TRANSLATIONS_IT, }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); export default i18next;

que error estoy haciendo. básicamente tengo que asignar valores de otro componente.