CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxreact-hooks
Shruti sharma
Shruti sharma

Reputation: 211

calling another react component in my i18next file

I have below code.

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;

I am getting TRANSLATIONS_EN from a file. Now I need to get this value from API. so I created below componenet for testing.

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;

when I am importing the above component in my i18 file and calling no output is coming.

import TransFile from './TransFile';

      <div>
        <TransFile />
      </div>;

I inserted above code in myi18next file but no output is coming. it is not even printing alert. Now my I18 file is below,

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;

what mistake I am doing. basically I have to assign values from another component.

Upvotes: 0

Views: 407

Answers (1)

phoique
phoique

Reputation: 107

https://www.i18next.com/overview/getting-started Create a simple structure like here and export it with export default. Note: Call the translation files by importing them yourself. If it is used outside of Component

import i18n from '../i18n';
i18n.t('test')

Upvotes: 2

Related Questions