useTranslation always "not ready"

default discord avatar
sam
3 weeks ago
1

I have a HOC called

withTranslate

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 }) =>
              Validator.internalUrl(value)
                ? t('custom:linkGroup.url.urlIsInternal')
                : t('custom:linkGroup.url.description')
            ),


However, it appears that

t

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

    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

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