React: Escaping curly brackets

[RickWong]

Thanks for React and JSX!

Would it be possible to escape curly brackets in the future? Like this:

<div>In JSX you can use the \{ and \} characters to escape and evaluate inline JavaScript.</div> 

[syranide]

You bring up a valid issue.

While escaping with a back-slash would be possible, it could introduce far more serious issues. What if you actually want a \ followed by a {. \\{ is basically the only solution and the only proper implementation would be to fully support escaping. Which doesn't really mesh with HTML IMHO.

The simplest solution and the one I'm pretty certain the devs will advocate as well is {'{'} and {'}'} or rather {'{ and }'}.

[sophiebits]

Yeah, quoting as a plain JS string is the way to do it. Let us know if this poses a problem for you somehow.

[RickWong]

Hey Spicyj, sadly it makes <style> tags with css { } blocks impossible to embed in JSX. I've worked my way around it by putting css in a property:

• https://edealer.nl/mao/ (proof of concept http://suitcss.github.io -ish components)

[syranide]

@RickWong If you really want have inline <style> (I really don't recommend it) then you should use dangerouslySetInnerHTML instead and define the CSS string elsewhere.

[RickWong]

Hehe, it's inline but it makes the component self-contained. It's almost comparable to how JSX is inline HTML. My work around does utilize dangerouslySetInnerHTML but it's not optimal as it looks like crap instead of a template.

Problem with the other solution {'{'} is that those create span tags which invalidate the CSS syntax.

[mysterycommand]

Maybe you could just use HTML entities? { (opening curly brace) and } (closing) … doesn't solve the "looks like crap" problem, but might work?

Nope, it _looks_ like it works in renderToStaticMarkup but when it's just render'd, it still gets the spans.

[RickWong]

Old topic but I think JS string literals are actually a valid solution to this problem. Also I solved it by putting them all in a "sheet" prop that I use instead of "children". See https://github.com/RickWong/ReactStyle

[syranide]

Related facebook/jsx#28

[darobin]

FWIW, for anyone stumbling upon this issue while searching for a solution, the simplest (assuming ES6) is probably:

<style>{`
    .spinner ellipse { opacity: 0; }
    /*...*/
`}
</style>

[timurtu]

In webstorm atleast {'}'} gives parsing issues and makes the code reformat incorrectly. My solution to this which I wasn't really happy about was

function curlyStart() {
  return '{'
}

function curlyEnd() {
  return '}'
}

[gaearon]

Please file an issue with WebStorm, I'm sure they'd be happy to fix. cc @prigara

[prigara]

Hi, @timuric! Here's a related issue on our tracker: https://youtrack.jetbrains.com/issue/WEB-21774 Hope we'll get it fixed soon.

[mnpenner]

If you happen to be generating JSX like me, this seems to work:

> '{hello}{world}'.replace(/([{}]+)/g,"{'$1'}")
"{'{'}hello{'}{'}world{'}'}"

Or maybe this fun little regex:

> 'hello <style>a { font-weight: bold }</style>'.replace(/(<style>)(.*?)(<\/style)/gis, (_,start,css,end) => `${start}{String.raw\`${css.replace(/`/,'\\`')}\`}${end}`)
'hello <style>{String.raw`a { font-weight: bold }`}</style>'

[tobq]

What if you actually want a \ followed by a {

JSX\\\{ -> Out\{

[hacknlove]

my solution, define the whole string outside

const codeExample = '{ _id: { $gt: ObjectId() } }'

return (
<foo>{codeExample}</foo>
)

```