react i18next “hooks” error when using t() from useTranslation()

Question

I am using React-i18next library and I need to get a translation function t() inside of a function.

export function translateCell(cell) {
  const { t } = useTranslation();
  return (t(cell));
}

When using useTranslation() it fails with error

Hooks can only be called inside the body of a function component.

I tried to use I18nextProvider and also .use(initReactI18next) in initialization, but both setups produces same error.

Am I using it the wrong way, or have I misunderstood something?

EDIT: I found out, that only functions, that will be rendered as component can use useTranslation. Like

function export MyComponent (cell) {
  const { t } = useTranslation();
  return (<div>{t(cell)}</div>);
}
...
render(){
<MyComponent/>

Answer 1

I found solution in exporting i18n object after inicialization and use that at all other places which I need.

file i18nSetup.js:

i18n
    .use(initReactI18next)
    .init({
        resources: translationResources,
        interpolation: {
            escapeValue: false 
        }
    });

export default i18n;

In other files:

import i18n from "../functions/i18nSetup";

export function translateCell(cell) {
  return (i18n.t(cell));
}

Answer 2

Try like this:

import { Trans } from 'react-i18next';

and use it like this:

<Trans>word-key</Trans>

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