React - Using <Trans> with object properties

I haven’t had much luck doing

const component = (props) => {<Trans>Hello {props.user}</Trans>);

it always renders Hello undefined. However if I change it to

const component = ({user}) => (<Trans>Hello {user}</Trans>);

I get Hello Foo, which is the output I expected in the first case. Is this a bug that’s easy to fix? I’ll be happy to PR if you point me in the right direction.

[tricoder42]

I tried to generate name from expression, and it works:

      // src/index.js
      import generate from 'babel-generate'

      ...
 
      // line 236
      if (t.isIdentifier(exp) || t.isMemberExpression(exp)) {
        const name = generate(exp).code  // generate JS from AST
        const key = t.isIdentifier(exp) ? exp : t.stringLiteral(name)
        nextProps.text += `{${name}}`
        nextProps.values[name] = t.objectProperty(key, exp)

<Trans>Hello {props.name}</Trans>
// becomes
<Trans id="Hello {props.name}" values={{ "props.name": props.name }} />

It could literally works with any expression (the if condition just need to match other cases like CallExpressions, etc)

However, I don’t think it’s a good idea in general case. Ideally, all static values could be used as named arguments (variables, object properties, array indexes), while dynamic values (function calls) should be used as positional arguments. The reason is that we don’t know if function is pure:

<Trans>1st roll {random()}, 2nd roll {random()}</Trans>

// This won't work! random() in translation is called only once
<Trans id="1st roll {random()}, 2nd roll {random()}" values={{ "random()": random() }} />

// Now it works
<Trans id="1st roll {0}, 2nd roll {0}" values={{ "0": random(), "1": random() }} />

Problem is with object properties. ES6 introduces getters and they might have potentially side effects:

const props = {
  get random() {
    return Math.random()
  }
}

<Trans>1st roll {props.random}, 2nd roll {props.random}</Trans>
// and we're screwed again, props.random getter is called only once
<Trans id="1st roll {props.random}, 2nd roll {props.random}" values={{ "props.random": props.random }} />

It’s probably safer to use positional arguments everywhere except for simple identifiers. It has predictable behavior in all cases and if user wants to have variable name in translation, they’ll know how to achieve it.

@Peping What do you think?

[tricoder42]

This isn’t bug, it’s known limitation (Link to new docs, but it’s also mentioned in old one)

However, this should at least raise an error or warning in console.