Rendering ordered/unordered lists from a translation string.

🚀 Feature Proposal

I searched quite a while but couldn’t find a way to render basic HTML lists. Is there a recommended way output a plain HTML list from a translation string?

I did found the i18nIsDynamicList example, but that does not allow me to render content from the same translation string that is passed as key to the Trans component.

Motivation

I am using the Trans component with children to render dynamic and translated content. The dynamic content does require me to support adding ordered and unordered lists.

Example

Im looking for something in the likes of:

<Trans i18nKey="list_map">
  My cats are named:
  <ul>
     <li>Milo</li>
     <li>Simba</li>
  </ul>
  and they are very sweet.
</Trans>

// JSON -> "list_map": "My dogs are named: <1><2>Ace</2><2>Diesel</2><2>Finn</2></1>"

// Which would output:

//  My dogs are named:
//  <ul>
//     <li>Ace</li>
//     <li>Diesel</li>
//     <li>Finn</li>
//  </ul>
//  and they are very sweet.

[wilbo]

Thanks for your quick reply. I managed to create a working solution by updating the nested index elements to 0. I did not now that nested children would reset its index to 0.

// JSON -> "list_map": "My dogs are named: <1><0>Ace</0><0>Diesel</0><0>Finn</0></1> and they are very sweet."

<Trans i18nKey="list_map">
  My cats are named:
  <ul>
    <li>Milo</li>
    <li>Simba</li>
  </ul>
  and they are very sweet.
</Trans>

[baxromxojasultonxojayev]

how can I iterate array elements to unrodered list with map

{t("text", { returnObject: true }).map((text, country_code) => (
{text}
))} 

when I do this it gives me t(…).map is not a function