Returning a JSON array of translated content using i18n

Question

Context: I am making a multi-language page using the react-i18next module of ReactJS.

Issue: I cannot access the arrayed JSON content.

The translated content being stored in separate JSON files for each language, non-array content works fine and gets correctly displayed and translated, however, I can't seem to use the arrayed content on my React components, let alone access its content through console.log().

Below is an example of my translationEN.json file:

{ "name": "Test", "occupations":["occupation1", "Part-time occupation2", "Language enthusiast"] }

I am being able to refer to the non-array name using i18n.t("name"). However, attempting to access my arrayed occupations using i18n.t("occupations") results in the following console.log:

key 'occupations (en)' returned an object instead of string.

Using JSON.stringify() doesn't solve the issue, neither does console.log(i18n.t("occupations"), { returnObjects: true }) as suggested on i18next's documentation

Thanks in advance!

Y H R · Accepted Answer · 2020-12-12 21:07:10Z

Problem solved. The array values can be accessed as such: i18n.t("occupations.0") for occupation 1, i18n.t("occupations.1") for Part-time occupation 2 and i18n.t("occupations.2") for Language enthusiast. I just need to loop it out to make it look cleaner.

Collectives™ on Stack Overflow

Returning a JSON array of translated content using i18n

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related