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?

Answer 1

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