react-i18next: strings not being translated

Question

I had a frustrating problem with the react-i18next library. I just couldn't get the library to translate the strings in my app.

The code was as follows:

App.tsx:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import resources from './resources';

// code omitted...

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

// rest of the code here...

resources/index.tsx:

export default {
  en: {
    'Math Visualized': 'Math Visualized asd',
  },
  fi: {
    'Math Visualized': 'Matematiikan visualisointia',
  },
};

components/header/Header.tsx:

import { withTranslation } from 'react-i18next';

// code omitted...

class HeaderComponent extends React.Component<Props, State> {
  render() {
    const { headerText, subheaderText, t } = this.props;

    // react-bootstrap used here
    return (
      <Navbar bg="dark" variant="dark">
        <Navbar.Brand>{t(headerText)}</Navbar.Brand>
        {subheaderText && <Navbar.Text>{t(subheaderText)}</Navbar.Text>}
      </Navbar>
    );
  }
}

export const Header = withTranslation()(HeaderComponent);

The header and subheader text strings simply refused to be translated.

mkkekkonen · Accepted Answer · 2020-04-08 17:54:16Z

2

I had simply forgotten to add the translation namespace to the resources file. I modified it like this:

export default {
  en: {
    translation: { // THIS NAMESPACE HERE WAS MISSING
      'Math Visualized': 'Math Visualized asd',
    },
  },
  fi: {
    translation: {
      'Math Visualized': 'Matematiikan visualisointia',
    },
  },
};

And everything worked.

answered Apr 8, 2020 at 17:54

mkkekkonen

1,8042 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-i18next: strings not being translated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related