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?
Advertisement
Answer
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>)