react-i18next: Cannot pass several components to

Describe the bug I try to pass several components created by map function to Trans component, but for now it renders only the first wrapper element

Occurs in react-i18next version npm module version 10.0.5

To Reproduce Steps to reproduce the behavior:

Create Trans with components property [ <ul>{['item1', 'item2'].map((item) => (<li key={item}>{item}</li>))}</ul>]
In translation.json: “test”: “some list: <0></0>”
See that it renders only the ul

Also, if I pass iterable component to a values property, it renders [object Object], because values property cannot accept objects.

Expected behaviour I want to pass whole component as a translation variable,

Sample to see https://codesandbox.io/s/ojqxzpw86y

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 19 (14 by maintainers)

Most upvoted comments

@brumeregan than don’t use map but a standalone component

function Cats({items}) {
  return <li>{items.map((item) => (<b key={item}>{item}</b>, ))}</li>
}




     <Trans i18nKey="translation_id">
        So in this case in some other languages translator could translate as <Cats items={['cat1', 'cat2']}are my cats
     </Trans>

jamuhl on Feb 15, 2019

These values, that need to be included in translation string are dynamic. I get those values from server they are not hardcoded. Example:

componentDidMount() {
   fetchValuesFromBackend().then((values) => {
      this.setState({values});
   });
}

render() {
   if (!this.state.values) {
      return null;
   }
   return (
     <Trans i18nKey="translation_id">
        <ul>{values.map((value) => <b>{value}</b>)}</ul>
     </Trans>
   );
}

where translation_id is “start of the list <0></0> end of the list” ** What i get is start of the list <ul></ul> end of the list

How can i render nested array?

iaroslavshvets on Feb 15, 2019