Lingui map translated content not showing

Question

I am using Lingui for translation from English to Arabic. I am using an array of objects to display my content. The issue I have is that the Arabic translation for the mapped array is not showing. The codes are in separate files.

import { t } from "@lingui/macro";
export const Courses = [
  {
    id: 0,
    name: t`Unlock the secrets of Open Science.`,
    description: t`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: t`Your Open Science Journey Begins Here.`,
    description: t`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];

 

{Courses.map(({ id, name, icon, description }) => (
            <div key={id} className="courses-section__container-course">
              <div className="courses-section__container-course__icon-content">
                <img
                  src={icon}
                  className="courses-section__container-course__icon-content-icon"
                  alt={`${name} icon`}
                />
              </div>
              <h3 className="courses-section__container-course__name">
             {name}
              </h3>
              <p className="courses-section__container-course__description">
                {description}
              </p>
            </div>
          ))}

i18n.ts file:

import { i18n } from "@lingui/core";
import { en, ar} from "make-plural/plurals";

export const locales = {
  en: "English",
  ar: "Arabic",
};
export const defaultLocale = "en";

i18n.loadLocaleData({
  en: { plurals: en },
  ar: { plurals: ar },
});

i18n.load(defaultLocale, {});
i18n.activate(defaultLocale);

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages.ts`);
  i18n.load(locale, messages);
  i18n.activate(locale);
}

The .linguirc config

{
  "locales": ["en", "ar"],
  "sourceLocale": "en",
  "catalogs": [{
    "path": "src/locales/{locale}/messages",
    "include": ["src"]
  }],
  "format": "minimal",
  "compileNamespace": "ts"
}

Answer 1

The issue is that the t macro gets executed before the locale is fully loaded (assuming that the descriptions, etc. are included as text to be translated by lingui).

The best option to do this would be:

import { t } from "@lingui/macro";

export const Courses = [
  {
    id: 0,
    name: () => t`Unlock the secrets of Open Science.`,
    description: () => t`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: () => t`Your Open Science Journey Begins Here.`,
    description: () => t`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];


{Courses.map(({ id, name, icon, description }) => (
  <div key={id} className="courses-section__container-course">
    <div className="courses-section__container-course__icon-content">
      <img
        src={icon}
        className="courses-section__container-course__icon-content-icon"
        alt={`${name} icon`}
      />
    </div>
    <h3 className="courses-section__container-course__name">
   {name()}
    </h3>
    <p className="courses-section__container-course__description">
      {description()}
    </p>
  </div>
))}

Answer 2

Usage of t macro outside of function is not going to work. Solution proposed Elias Schablowski would work, but there is better solution

export const Courses = [
  {
    id: 0,
    name: msg`Unlock the secrets of Open Science.`,
    description: msg`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: msg`Your Open Science Journey Begins Here.`,
    description: msg`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];


const {i18n} = useLingui();

{Courses.map(({ id, name, icon, description }) => (
  <div key={id} className="courses-section__container-course">
    <div className="courses-section__container-course__icon-content">
      <img
        src={icon}
        className="courses-section__container-course__icon-content-icon"
        alt={`${name} icon`}
      />
    </div>
    <h3 className="courses-section__container-course__name">
   {i18n._(name)}
    </h3>
    <p className="courses-section__container-course__description">
      {i18n._(description)}
    </p>
  </div>
))}

Docs: https://js-lingui-git-next-lingui.vercel.app/tutorials/react-patterns