I have 2 JSON files with my translation data -> **EN** file and **FR** file.

I am using react-i18next to handle my translations this way, which works fine, but since I am having repeatable components I need to map/loop through the translations to get the right output

**Example**

en:

```
export const EN = {
    page1: {
      section1 {
         titles: {
            title1: "title1_name",
            title2: "title2_name",
            title3: "title3_name"
          },
          buttons: {
             button1 : "button1_name",
             button2 : "button2_name",
             button3 : "button3_name",
          }
       }
       section2 { THE SAME AS SECTION 1 }
       section3 { THE SAME AS SECTION 1 }

    page2 { SAME AS PAGE 1 } 

```

The same thing applies for FR file (with french translations instead)

How can achieve to mapping all e.g titles from section1 and page1. Would that be even correct to use `map()` ?

Right now my solution is just to use `{t page1.section1.0.titles.title1}` which of course print the same title everywhere - in this case title1\_name

**Current Output with using** `{t page1.section1.0.titles.title1}` :

slider1: title1\_name

slider2: title1\_name

slider3: title1\_name

slider4: title1\_name
and so on so on...

**Expected output:**

slider1: title1\_name, button1\_name

slider2: title2\_name, button2\_name

slider3: title4\_name, button3\_name

slider4: title4\_name, button4\_name