React-i18next: Add translations at an array of list value

[Sohadwd]

First, thank you very much for this hard work and amazing tutorial.
I use it in my App and it's worked, but I need to translate the data component in the array of list.

I have this array :
var dataSaleThumb = [ { id: 1, imageSaleThumb: require("../../images/men1.png"), brand: "שם מוצר", price: "$1,299", discount: "$500", discountedPrice: "$699", description: "סופר סלים מתאים חליפה רשמית" }, { id: 2, imageSaleThumb: require("../../images/men2.png"), brand: "שם מוצר", price: "$1,299", discount: "$500", discountedPrice: "$699", description: "סופר סלים מתאים חליפה רשמית" }]
and I need to translate description to another languge, and this way {t("slider")} dosn't work.
So How I can use it?

Thank you very much for your time and looking forward to reading your answer!
Best wishes,

[jamuhl]

Hi @Sohadwd, i guess you like to translate the brand and descriptions from those objects in your array. Right?

You will need to map through the array and translate those values like eg.

const translatedDataSaleThumb = dataSaleThumb.map(item => {
  const ret = {
    ...item,
    brand: t(item.brand),
    description: t(item.description)
  };
  return ret;
});

[Sohadwd]

Yes exactly!
And it's WORK thank you @jamuhl :100:

but it takes the same description ore translate for each item and I need a different description for each item, jow I can do it?

[jamuhl]

hm...descriptions in your array looks different so you should get different calls to t resulting in different translations...

could you paste your code you use to render this array?

[Sohadwd]

<Card style={Style.mainCategories}> <List removeClippedSubviews={false} contentContainerStyle={{ flexDirection: "row" }} directionalLockEnabled={false} horizontal={true} showsHorizontalScrollIndicator={false} dataArray={translatedDataSaleThumb} renderRow={item => <RoundImageButton navigation={navigation} roundImageText={item.roundImageText} roundImageSource={item.roundImageSource} />} /> </Card>

dataArray={translatedDataSaleThumb}

[jamuhl]

so i guess the text you see is roundImageText={item.roundImageText} but that seems not to be a value of your items in translatedDataSaleThumb

[Sohadwd]

sorry for many questions , but see this my code in Home page

First the array :

 var roundImageData = [  //first section / icons
  {
    id: 1,
    roundImageSource: require("../../images/wallet-icon.png"),
    roundImageText: "ארנק"  
  },
  {
    id: 2,
    roundImageSource: require("../../images/clothes.png"),
    roundImageText: "עניבה"  

  },
  {
    id: 3,
    roundImageSource: require("../../images/shirt.png"),
    roundImageText: "חולצה"

  },
  {
    id: 4,
    roundImageSource: require("../../images/jeans-pocket.png"),
    roundImageText: "ג'ינס"

  }
]; 

and here the map :

``` const { t, i18n } = this.props;
const translatedroundImageDat = roundImageData.map(item => {
const ret = {
...item,
roundImageText:item.roundImageText

};
return ret;
});

and here the render items: 

removeClippedSubviews={false}
contentContainerStyle={{ flexDirection: "row" }}
directionalLockEnabled={false}
horizontal={true}
showsHorizontalScrollIndicator={false}
dataArray={translatedroundImageDat}
renderRow={item =>
navigation={navigation}
roundImageText={item.roundImageText}
roundImageSource={item.roundImageSource}
/>}
/>

and finally , the translate in i18n.js file : 

he: { //en
home: {
section1: "מכנסיים ג’/ינסים",
section2:"מכנסיים ג’/ינסים",
section3:"חולצות מכופתרות מדהימות",
slider: "מגמות",
roundImageData1: "ארנק",
roundImageData2: "עניבה",
roundImageData3: "חולצה",
roundImageData4: "ינס"
},

ar: {
home: {
section1: "بنطلون / جينز",
section2: "بنطلون / جينز",
section3: "قمصان زرقاء مذهلة",
slider: 'اتجاهات',
roundImageData1: "المحفظة",
roundImageData2: "ربطة عنق",
roundImageData3: "بلوزة",
roundImageData4: "فينس"
},

```
So ho I can translate it, with different value for each item

[jamuhl]

Your map does currently no translation...but looking at your translations you can do:

<Card style={Style.mainCategories}>
            <List
              removeClippedSubviews={false}
              contentContainerStyle={{ flexDirection: "row" }}
              directionalLockEnabled={false}
              horizontal={true}
              showsHorizontalScrollIndicator={false}
              dataArray={translatedroundImageDat}
              renderRow={(item, i) =>
                <RoundImageButton
                  navigation={navigation}
                  roundImageText={t(`roundImageData${i}`}
                  roundImageSource={item.roundImageSource}
                />}
            />
          </Card>

i guess

[Sohadwd]

I try this way but it gives me a syntax error ! :/

Can I put the translation on the map?

[jamuhl]

roundImageText={t(roundImageData${i})} add the closing )

[jamuhl]

best might be asking this over at stackoverflow - as this issue is not really related to i18next or this repo - it's more or less about how to write code.

Adding all the code well formatted would also help. Hard to do remote debugging with just "code doesn't accept this method!"

[hemavkha]

TypeError: t.map is not a function

Hi I m getting the above error when i try to do this

const ITEMS = (translate) => [ { 'id': 'item1', 'title': translate('myTodo.itemname1'), 'description': translate('key.description1'),' }, { 'id': 'item2', 'title': translate('key.itemname2'), 'description': translate('key.description2'),' } and few more...];

<component items={ITEMS} />

Translation-key.json
{ "myTodo.itemname1": "Shopping", "myTodo.itemname2": "Movie" }

Errors

TypeError: t.map is not a function
at i (main.bundle.js:16600)
at main.bundle.js:121241
at measureLifeCyclePerf (main.bundle.js:121011)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (main.bundle.js:121240)
at ReactCompositeComponentWrapper._constructComponent (main.bundle.js:121215)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121123)
at Object.mountComponent (main.bundle.js:22861)
at ReactDOMComponent.mountChildren (main.bundle.js:120566)
at ReactDOMComponent._createInitialChildren (main.bundle.js:116798)
at ReactDOMComponent.mountComponent (main.bundle.js:116617)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactDOMComponent.mountChildren (main.bundle.js:120566)
at ReactDOMComponent._createInitialChildren (main.bundle.js:116798)
at ReactDOMComponent.mountComponent (main.bundle.js:116617)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactDOMComponent.mountChildren (main.bundle.js:120566)
at ReactDOMComponent._createInitialChildren (main.bundle.js:116798)
at ReactDOMComponent.mountComponent (main.bundle.js:116617)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactDOMComponent.mountChildren (main.bundle.js:120566)
at ReactDOMComponent._createInitialChildren (main.bundle.js:116798)
at ReactDOMComponent.mountComponent (main.bundle.js:116617)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactDOMComponent.mountChildren (main.bundle.js:120566)
at ReactDOMComponent._createInitialChildren (main.bundle.js:116798)
at ReactDOMComponent.mountComponent (main.bundle.js:116617)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
at Object.mountComponent (main.bundle.js:22861)
at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:121306)
at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:121193)
__stack_frame_overlay_proxy_console__ @ main.bundle.js:205985
Preview._this.handleError @ main.bundle.js:135240
(anonymous) @ main.bundle.js:135307
requestAnimationFrame (async)
executeCode @ main.bundle.js:135302
componentDidMount @ main.bundle.js:135254
(anonymous) @ main.bundle.js:121200
measureLifeCyclePerf @ main.bundle.js:121011
(anonymous) @ main.bundle.js:121199
notifyAll @ main.bundle.js:40553
close @ main.bundle.js:123119
closeAll @ main.bundle.js:26761
perform @ main.bundle.js:26708
batchedMountComponentIntoNode @ main.bundle.js:43586
perform @ main.bundle.js:26695
batchedUpdates @ main.bundle.js:122793
batchedUpdates @ main.bundle.js:18462
_renderNewRootComponent @ main.bundle.js:43779
_renderSubtreeIntoContainer @ main.bundle.js:43861
render @ main.bundle.js:43882
render @ main.bundle.js:108953
(anonymous) @ main.bundle.js:108967
__webpack_require__ @ main.bundle.js:708
fn @ main.bundle.js:113
module.exports @ main.bundle.js:108712
__webpack_require__ @ main.bundle.js:708
(anonymous) @ main.bundle.js:806
(anonymous) @ main.bundle.js:809

[jamuhl]

@hemavkha you ITEMS is a function -> call it <component items={ITEMS(t)} />

[hemavkha]

@hemavkha you ITEMS is a function -> call it <component items={ITEMS(t)} />

Its working Thanks @jamuhl