How to use react-i18next?

Question

I would like to translate words that are inside an object. myInformation is being called and placed in merge variable together with myCompany.

import { useTranslation } from 'react-i18next'
const myInformation = {
  title: 'My information',
  icon: InfoOutlinedIcon,
  links: [
    {
      name: 'Personal information',
      slug: `/profile/personal-information`,
      icon: InfoOutlinedIcon,
    },
    {
      name: 'My loyalty programs',
      slug: `/profile/my-loyalty-programs`,
      icon: FavoriteBorderOutlinedIcon,
    },
    {
      name: 'Id documents',
      slug: `/profile/id-documents`,
      icon: ContactMailIcon,
    },
    {
      name: 'My password',
      slug: `/profile/my-password`,
      icon: VpnKeyIcon,
    },
  ],
}

 const ViewInformation = () => {

 const merge = [myInformation, myCompany]
 const renderList = merge.map((item, i) => (
    <OneMenuItem key={i} handleClose={handleClose} item={item} />
  ))

 return({renderList})
 }

When I add const { t } = useTranslation() under myInformation, it won't allow me to do it. How can I translate the words when they are in map?

const oneMenuItem = () => {
    //some other codes here
    const renderNestedLinks = item.links
    item.links.map((link, key) => {
        return (
          <Box key={key} mt={0.5}>
            <ListItem
              onClick={handleClose}
              to={link.slug}
              component={Link}
              className={classes.nested}
            >
              <ListItemIcon style={{ minWidth: '40px' }}>
                {<link.icon color="primary" />}
              </ListItemIcon>
              <ListItemText
                className={classes.listItemText}
                primary={link.name}
              />
            </ListItem>
          </Box>
        )
      })

      return ({renderNestedLinks})
}

Answer 1

You can call useTranslation inside OneMenuItem, and set the names in myInformation to be translation keys. Lets say your Component's name is ViewInformation:

const ViewInformation = () => {
  ...component logic

  const myInformation = {
  title: 'my_information',
  icon: InfoOutlinedIcon,
  links: [
    {
      name: 'personal_information',
      slug: `/profile/personal-information`,
      icon: InfoOutlinedIcon,
    },
    ...
  ],
  }
  ...component logic

  const merge = [myInformation, myCompany]
  const renderList = merge.map((item, i) => (
    <OneMenuItem key={i} handleClose={handleClose} item={item} />
  ))
}

Then, in OneMenuItem:

import { useTranslation } from 'react-i18next';

const OneMenuItem = () => {
  const { t } = useTranslation();
 ...component logic

  item.links.map((link, key) => {
        return (
          <Box key={key} mt={0.5}>
            <ListItem
              onClick={handleClose}
              to={link.slug}
              component={Link}
              className={classes.nested}
            >
              <ListItemIcon style={{ minWidth: '40px' }}>
                {<link.icon color="primary" />}
              </ListItemIcon>
              <ListItemText
                className={classes.listItemText}
                primary={t(link.name)} // We use t() here, since item.name is a translation key
              />
            </ListItem>
          </Box>
        )
      })
}