useTranslation always "not ready"

default discord avatar
sam6466last year

I have a HOC called


that looks like this:

const withTranslate = (Component) => (props) => {
  const { t } = useTranslation('version');

  return <Component {...props} t={t} />;

The idea is that sometimes I want to have dynamic descriptions to help users, to display different translation strings depending on what the value of the field is.

For example, I have a links that can either be external or internal pages. Internal pages use a relationship, and external is just a URL string. In the case that a user enters a URL for an external page that looks like it might be a page configured in the CMS, I want to prompt them with the description.

Using the withTranslate HOC then looks like this...

description: withTranslate(({ value, t }) =>
                ? t('custom:linkGroup.url.urlIsInternal')
                : t('custom:linkGroup.url.description')

However, it appears that


is always

not ready

. Even if I check for it like

ready && <Component ..

, my translations don't appear, just the key string.

Any ideas why useTranslation might not be working here?

Solved... I had react-i18next version 12 installed in my dependencies, whereas payload has version 11

    Star on GitHub


    Chat on Discord



    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.