How to Translate data in array of objects with .map() using react-i18next

Question

Just started using i18next and having a bit of issues translating the following data.

export const educationData = [
  { education: "Some education 1", timeframe: "2017 - 2018", id: 1 },
  { education: "Some education 2", timeframe: "2016 - 2017", id: 2 },
  { education: "Some education 3", timeframe: "2015 - 2016", id: 3 },
  { education: "Some education 4", timeframe: "2014 - 2015", id: 4 }
];

JSON in locales for different languages looks like:

"education": {
  "heading": "Education",
  "educationData": [
    {
      "id": 1,
      "education": "Some education 1",
      "timeframe": "2017 - 2018"
    },
    {
      "id": 2,
      "education": "Some education 2",
      "timeframe": "2016 - 2017"
    },
    {
      "id": 3,
      "education": "Some education 3",
      "timeframe": "2015 - 2016"
    },
    {
      "id": 4,
      "education": "Some education 4",
      "timeframe": "2014 - 2015"
    }
  ]
}

Component looks like:

import React from "react";
import { useTranslation } from "react-i18next";
import { educationData } from "../data/educationData";
import Education from "./Education.js";

function ListEducation() {
  const { t } = useTranslation();
  return (
    <div className="education py-1">
      <h2>{t("education.heading")}</h2>
      <hr />
      {educationData.map((edu) => (
        <Education
          key={edu.id}
          education={edu.education}
          timeframe={edu.timeframe}
        />
      ))}
    </div>
  );
}

export default ListEducation;

How do i get the translations to work in the .map() function? Outside of .map() something like t("education.educationData.0.education") works fine.

Inside .map function it just outputs "education.educationData.0.education" as a string.

Where are you using the t("education.educationData.0.education")? — Hassan Imam
– Hassan Imam, Commented May 14, 2020 at 19:00
This is just to show that outside of the map function it shows the object data which works fine but inside the map function it show a string instead. — MoonBoots
– MoonBoots, Commented May 15, 2020 at 7:22
codesandbox.io/s/dreamy-wozniak-6cdnb The locales are in the public folder. — MoonBoots
– MoonBoots, Commented May 16, 2020 at 10:23

Sabito · Accepted Answer · 2021-01-15 08:39:43Z

12

You can get access to an array from file with translations using:

t('education.educationData', { returnObjects: true })

and then easily map through this array.
Source: i18next documentation: Arrays

edited Jan 15, 2021 at 8:39

Sabito

5,23010 gold badges39 silver badges66 bronze badges

answered Jan 15, 2021 at 8:37

tezyakov

1361 silver badge3 bronze badges

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

Comments

momal · Accepted Answer · 2020-07-29 13:52:36Z

4

You can try this

{t(`education.educationData.${id}.${education}`)}

You're basically concatenating the string.

answered Jul 29, 2020 at 13:52

momal

5872 gold badges13 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to Translate data in array of objects with .map() using react-i18next

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related