I’m working on migrating an existing app to use i18next. Currently, there are a few places in the app where strings that are displayed aren’t hard-coded. For example:

• Some third-party API returns an array of objects that have propertyEn, propertyFr, …, property[Locale].
• The app allows users to create items and provide strings for different languages. These items are later displayed based on locale.

I’d like some guidance on the preferred approach to dealing with strings that I don’t know beforehand in i18next. I do know their locales, I’m just not sure how to pick the correct string with i18next if it isn’t already in a .JSON file.

I’ve found the resolvedLanguage property, which gets us the current locale and could be used to dynamically pick a string (in fact, it’s the equivalent of what we do in the app with a helper method).

React pseudocode example:

{items.map((item) => (
    <div key={item.id}>
        i18n.resolvedLanguage === "en-US"
            ? item.propertyEn
            : item.propertyFr
    </div>
))}

Use of React is purely for demonstration purposes, it’s not directly relevant to my question.

I’m wondering if there isn’t a built-in way to handle this in i18next.

I’ve also seen people recommend using addResourceBundle, but I’m not sure if it’s intended for things like a list of items with user-generated strings in them.