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.

Obsolete

Where are you using the t("education.educationData.0.education")? – Dwaindwaine

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. – Obsolete

Can you share the your tried code? – Dwaindwaine

codesandbox.io/s/dreamy-wozniak-6cdnb The locales are in the public folder. – Obsolete

Anyone know how to get this working? – Obsolete

Answer 1

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

Yetac

Answer 2

You can try this

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

You're basically concatenating the string.

Bunion