Render curly braces as plain text in React/JSX

Question

I am having problems displaying { and } as text in React. I saw a similar question that someone said to wrap the entire string in curlies, but this is not working:

let queries_block = this.state.previous_queries.map((dataset) => { return (<p>{"{{}}"}<p>) }); if (results) { results_block = ( <div> <p>Queries:</p> {queries_block} <br/><br/> <p>Results: {results_count}</p> <JSONPretty id="json-pretty" json={results}></JSONPretty> </div> ); } else { results_block = null; }

The return (<p>{"{{}}"}<p>) causes

ERROR in ./src/components/app.js Module build failed: SyntaxError: Unexpected token, expected } (47:13) 45 | <JSONPretty id="json-pretty" json={results}></JSONPretty> 46 | </div> > 47 | ); | ^ 48 | } else { 49 | results_block = null; 50 | } @ ./src/index.js 15:11-38 webpack: Failed to compile.

Is there an easy way to escape curly braces in jsx?

Rob LaFave · Accepted Answer · 2017-11-17 01:48:04Z

If you'd like to render curly braces as plain text within a JSX document simply use the HTML character codes.

Left Curly Brace { : {

Right Curly Brace } : }

user94559 · Accepted Answer · 2017-10-06 22:31:34Z

91

I think the issue is just a typo. You have this:

return (<p>{"{{}}"}<p>)

but you need this (note the closing p tag instead of another opening one):

return (<p>{"{{}}"}</p>)

answered Oct 6, 2017 at 22:31

user94559

60.3k6 gold badges108 silver badges107 bronze badges

1 Comment

Noumenon Jan 29 at 22:20

I skipped this at first but it's the right answer: just put a regular string inside JSX expression delimiters. <p>{'{braces are fine here}'}</p>.

sr9yar · Accepted Answer · 2021-11-04 08:23:49Z

You can even use string interpolation in ES6. Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. Template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes.

eg: return (<p>{`{{}}`}</p>)

I was about to suggest this before I saw your answer. Yet another way is to use JSON.stringify. e.g. <pre>{JSON.stringify(result, null, 4)}</pre> is a quick and dirty way to print JSON.

dreamLo · Accepted Answer · 2022-01-27 14:09:32Z

If you are in a situation where you can't use { and }, then you can use custom code:

export default class Component extends React.Component { render () { return ( Some object {'{'}id: 1{'}'} ) } }

Which will output the text Some object {id: 1}

Update: Changed it to a better solution, thanks to @xec

Yashasvi Haldiya · Accepted Answer · 2023-11-15 08:06:09Z

You can also render curly braces with a variable as well. For example :

const curlyBraces = '{}'; return This is an example for {cusrlyBraces} rendered in JSX

Collectives™ on Stack Overflow

Render curly braces as plain text in React/JSX

5 Answers 5

Comments

1 Comment

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

1 Comment

Comments

Linked

Related