How to use react-i18next < Trans > Component to display array elements?

When using the <Trans> component of react-i18next to display array elements, the main steps involve setting up internationalization resource files and using the <Trans> tag within React components to correctly reference these array elements. I will demonstrate this functionality with a specific example.

Step 1: Setting up i18n Configuration

First, ensure that react-i18next is installed. Then, configure the i18n instance and initialize it as follows:

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

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: {
          items: ["Item 1", "Item 2", "Item 3"]
        }
      },
      zh: {
        translation: {
          items: ["项目1", "项目2", "项目3"]
        }
      }
    },
    lng: "en", // set to "zh" for testing
    fallbackLng: "en",

    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

Step 2: Using <Trans> Component to Display Array Elements

Next, in your React component, utilize the <Trans> component to reference and display elements from the array. For example:

javascript
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';

function ItemList() {
  const { t } = useTranslation();

  return (
    <ul>
      {t('items', { returnObjects: true }).map((item, index) => (
        <li key={index}>
          <Trans>{item}</Trans>
        </li>
      ))}
    </ul>
  );
}

export default ItemList;

In this example, the t function retrieves the items array and returns it as an object. We then iterate over this array, using the <Trans> component to display each element. This approach ensures that the text is accurately translated based on the current language environment.

Notes

• Verify that your translation files (such as the English and Chinese resource files shown above) maintain clear and correct array and object structures.
• When using the <Trans> component, if the text contains HTML tags or requires additional processing, it preserves these tags or structures.

By following these steps, you can effectively leverage the <Trans> component of react-i18next to display array elements and translate them appropriately according to the active language environment.