React component inside interpolated React Component - reactjs

Question

I have a simple <Trans/> React Component which allows to translate a key with some properties (I use sprintf). For example:
<Trans planet="World">Hello %(planet)s</Trans>
renders:
Hello World
The issue is when trying to render some of those properties dynamically, say instead of "World" I want to have
<Trans color="blue">%(color)s planet</Trans>
Now, what react does is first outputting the following:
Hello [object Object]
Before going down the render path and correctly render
Hello blue planet
This results in a little flickr of showing [object Object] instead of the rendered element. I have tried to use renderToString, but then it would force me to use some dangerouslySetInnerHTML which doesn't work with other translation constrains.
Any thoughts?
import React, {PropTypes, Component} from 'react'
import {sprintf} from 'sprintf-js'
export default class Trans extends Component {
translate(key, args){
if(this.props.context && this.props.context[key]) key = this.props.context[key]
else console.error('%s is not in translated keys', key, ' - context was ', this.props.context)
if(typeof key === 'object' && key.singular){
if(this.props.isPlural)
return sprintf(key.plural, args)
else
return sprintf(key.singular, args)
}
return sprintf(key, args)
}
render() {
return (
<span>
{this.translate(this.props.children, this.props)}
</span>
)
}
}

Answer 1

You need to ensure that the #toString() method on the color prototype returns what you want.