Escape Curly Brackets in props.children

As Template Literals are introduced in ES6, we can use them here without introducing too many curly braces.

render() {
     let address = 'Somewhere on this earth!';
     return (
        <MyComponent>
            {`My address is ${address}`}
        </MyComponent>    
     );
}

Link to JSFiddle

Hope this helps :)


Try this:

<MyComponent>
  {'My address is {{address}}.'}
</MyComponent>

Try to wrap component content into curly braces:

<MyComponent>
  {"My address is {{address}}."}
</MyComponent>

All content in braces will be an expression and will not be parsed as JSX. At least, it works in Babel REPL