Escape Curly Brackets in props.children

Question

I'm trying to pass a Handlebars template to be processed as this.props.children using the following JSX snippet:

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

The result is Uncaught ReferenceError: address is not defined.

A workaround was to use something like:

<MyComponent>
  <span content="My address is {{address}}."></span>
</MyComponent>

And then use this.props.children.props.content. This is the only way I've found to essentially escape {{address}} being interpreted as interpolation by JSX.

Is there a straightforward way to escape curly braces in JSX?

Answer 1

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

Answer 2

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 :)