next-i18next i18n on array of objects

Question

I have an array of objects called "Options", that I use as a prop to a dropdown/select Material-UI component. I want to use the next-i18next library on the labels. I already implemented with success through all the next app just like the documentation explains. I tried using the {t('key')} and it doesn't allow.

import { useTranslation } from 'next-i18next'
const UsersPage = () => {
   const { t } = useTranslation('user');
   const Options = [
      { value: 'fullName', label: 'Nome' },
      { value: 'cpf', label: 'CPF' },
      { value: 'id', label: 'Padrão' },
   ]
   ...rest of the component
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['user', 'home']),
  },
})

export default UsersPage;

_"I tried using the {t('key')} and it doesn't allow"_ - What do you mean by that? Do you get an error? — juliomalves, Dec 22 '21 at 00:12

score 0 · Answer 1 · answered Dec 28 '21 at 16:12

The msefer answer is right:

`${t("key")}`

inside JSON or string building in props like

const since = `${t('since')}`;
const until = `${t('until')}`;
    ...

 <ListItemText
   primary={value.name}
   secondary={since + value.beginDate + until + value.endDate}
  />

next-i18next i18n on array of objects

1 Answers1