How mapping with .map a .json file using translation with i18next in React.js?

Question

Hello guys i have a question for you. Actually i want to map and render a component using text from a .json and using translation based on user language or detected language.

That's the translation.json (the same for another language)

{ "myText":[
          { "id":1,
            "text":"my text"
          },
          {
            "id":2,
            "text":"my text"
          }
  ]
}

Now i want to map this .json and return the text based on language in my component. If i do:

import { withNamespaces } from 'react-i18next';
import data from '../locales/en/translation.json';

function Component({t}) {
  return (
    <>
      {data.myText.map((item) => (
        <div key={t(item.id)}>
          {t(item.text)}
        <div/>       
    ))}          
    </>
  )
}

export default withNamespaces()(Component)

That's return only the "en" translation because the import is based on this .json file. Now how to have the translation based on user language through .map ?

You may want to checkout the official example of react-i18next: github.com/i18next/react-i18next/tree/master/example/react — adrai
– adrai, Commented Feb 4, 2021 at 13:57

Guilherme Samuel · Accepted Answer · 2021-02-07 23:20:52Z

1

Ok i did it using:

{i18next.t('myText', { returnObjects: true }).map((item) => (
    <div key={t(item.id)}>
      {t(item.text)}
    </div>
))}

Solution is here: https://www.i18next.com/translation-function/objects-and-arrays#arrays

edited Feb 7, 2021 at 23:20

Guilherme Samuel

5476 silver badges13 bronze badges

answered Feb 4, 2021 at 23:00

Antonio De Luca

737 bronze badges

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

Collectives™ on Stack Overflow

How mapping with .map a .json file using translation with i18next in React.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related