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