How can I translate object array in React through i18n?

Question

I have a problem about change the language in the object array in React through i18n.

I cannot react "t" feature of useTranslation. That's why I got an issue.

Here is my object array shown below.

import { useTranslation } from 'react-i18next';

export const CARD_DATA = [
  {
    'title': useTranslation.t('Card Data Title'), -> ERROR
    'icon': faCircleUser,
    'details': "I've studied Typography & Graphic Communication \
                at possibly the best Institution to do so in the \
                world - The University of Reading.",
    'color': '#e75d5d'
  },
  {
    'title': 'Responsive Web Design',
    'icon': faHeadphonesAlt,
    'details': 'I design future proof mobile first reponsive websites \
                to the latest web standards. I also keep up with \
                the most recent best practices.',
    'color': '#e75d5d'
  }
]

Here is my Home Page.

import { CARD_DATA } from '../data/CardData';

<div className={styles.cardGrid}>
    <CardGridView data={ CARD_DATA } />
</div>

Here is my i18n component shown below.

i18n.use(initReactI18next).init({
    resources: {
      en: {
        translations: {
          'Card Data Title' : 'English'
        }
      },
      de: {
        translations: {
           'Card Data Title' : 'Deutsch'
        }
      }
    },
    fallbackLng: 'tr',
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }
  });
  
export default i18n;

How can I fix my issue?

You can create a custom hook, which will return translated CARD_DATA. You can utilize useTranslation hook inside your custom hook — Eduard
– Eduard, Commented Feb 19, 2022 at 17:51
Read the docs! react.i18next.com/latest/usetranslation-hook It states clearly - after import, in a functional component, run const { t, i18n } = useTranslation(); and THEN you can access the t function without an issue. — Lith
– Lith, Commented Feb 19, 2022 at 17:58
@Lith As you can see, CARD_DATA is only a object array, not hook. — Sercan Noyan Germiyanoğlu
– Sercan Noyan Germiyanoğlu, Commented Feb 19, 2022 at 17:59
why dont u use the hook useTranslation, as documented in the documentation, inside a functional component were you have the rendered title prop? like return <div>{t(CARD_DATA.title)}</div>? — Lith
– Lith, Commented Feb 19, 2022 at 18:09
@Lith How can I get t from useTranslation in my CardData.js showing CARD_DATA? — Sercan Noyan Germiyanoğlu
– Sercan Noyan Germiyanoğlu, Commented Feb 19, 2022 at 18:12

adrai · Accepted Answer · 2023-07-09 09:33:02Z

6

https://react.i18next.com/guides/quick-start

If you need to access the t function or the i18next instance from outside of a React component you can simply import your ./i18n.js and use the exported i18next instance:

import i18next from './i18n'

i18next.t('my.key')

You may want to also listen to the languageChanged event to reset the appropriate translation, i.e.

i18next.on('languageChanged', (lng) {
  i18next.t('my.key')
})

edited Jul 9, 2023 at 9:33

answered Feb 20, 2022 at 16:21

adrai

2,5221 gold badge17 silver badges23 bronze badges

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

1 Comment

İlker Over a year ago

This works initially but it doesn't update my object if user chages the language.

Collectives™ on Stack Overflow

How can I translate object array in React through i18n?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related