How do you handle dynamic translations?

Hi,

Is it possible to translate the example below?

{routes.map(route => <Trans>{route}</Trans>)}

If routes equals [‘home’, ‘contact’] i’d expect two new keys to be extracted ‘home’ and ‘contact’. However, currently what is extracted is ‘{0}’.

[tricoder42]

Exactly, @lingui/babel-plugin-extract-messages finds i18nMark function calls and extracts it and remove i18nMark function completely.

[tricoder42]

Yeah, first you need to use i18nMark to mark translatable strings and then pass it as an id either to <Trans> component or i18n._ method:

const routes = [i18nMark('home'), i18nMark('contact')]

routes.map(route => <Trans id={route} />)