Question 73202 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Lingui map translated content not showing – Reactjs

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"
}
Tags:

2

Answers


  1. 0

    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>
))}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search