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:

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

Answer 2

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

Answer 3

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