In this article, we'll look at how to use the Trans and I18nextProvider components to render our translations.

Trans Component and Lists

We can use the Trans component with lists.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Trans } from "react-i18next";
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        list_map: "My dogs are named: <1></1>"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});
export default function App() {
  return (
    <div className="App">
      <Trans i18nkey="list_map">
        My dogs are named:
        <ul i18nIsDynamicList>
          {["mary", "max"].map((dog) => (
            <li>{dog}</li>
          ))}
        </ul>
      </Trans>
    </div>
  );
}

We have the list_map translation which we load with the Trans component.

i18nkey has the key for the translations.

The i18nIsDynamicList prop lets us render lists in our translations.

Components Array

We can interpolate translations with an array of components.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Trans } from "react-i18next";
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        hello: "hello great <0>{{what}}</0>"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});
export default function App() {
  return (
    <div className="App">
      <Trans
        i18nKey="hello"
        defaults="hello <0>{{what}}</0>"
        components={[<strong>{{ what: "universe" }}</strong>]}
      />
    </div>
  );
}

We have an array of components that we passed into the components prop.

The <0> tag indicates the index of the component will be interpolated.

We map the values to the interpolation placeholder with an object.

defaults has the default translation string.

i18nKey has the translation key.

I18nextProvider

We can initialize the i18n instance with the I18nextProvider .

For example, we can write:

index.html

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import i18n from "i18next";
import { initReactI18next, I18nextProvider } from "react-i18next";
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        hello: "hello world"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
  rootElement
);

App.js

import React from "react";
import { useTranslation } from "react-i18next";
export default function App() {
  const { t } = useTranslation();
  return <div className="App">{t("hello")}</div>;
}

The I18nextProvider wraps around the App so that we initial the i18n object for the whole app.

Then in our App component, we can get the translations.

Conclusion

We can use the Trans component to render lists. Also, we have the I18nProvider to wrap around app to enable translations in our whole app.