Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
95
rated 0 times [  98] [ 3]  / answers: 1 / hits: 49947  / 7 Years ago, fri, october 6, 2017, 12:00:00

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?


More From » reactjs

 Answers
6

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

[#56298] Tuesday, October 3, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ryanulyssesb

Total Points: 91
Total Questions: 105
Total Answers: 102

Location: England
Member since Tue, Sep 8, 2020
4 Years ago
;