How to render curly braces as plain text in React
📅December 23, 2021
Today we will show you how to render curly braces as plain text in React/JSX. There are multiple ways to do it but here we will show you only two useful methods to achieve it.
Checkout more articles on ReactJS
- Conditionally add attributes to React components
- How to loop in React JSX
- MultiSelect dropdown in React
- How to set up a proxy in React App
- Conditionally change the row style in React DataTable
Ways to render curly braces in React
1. Using HTML character codes
To render the curly braces we can use the following codes.
Left Curly Brace { : `{`
Right Curly Brace } : `}`
2. Using string interpolation in ES6
We can 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.
return <p>{`{{}}`}</p>
That’s it for today.
Hope you like this short article. Happy Coding..!! 🙂