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
- dropdown-in-react" title="MultiSelect dropdown in React">MultiSelect dropdown in React
- How to set up a proxy in React App
- datatable" title="Conditionally change the row style in React DataTable">Conditionally change the row style in React DataTable
Ways to render curly braces in React
- Using HTML character codes
- string interpolation in ES6">Using string interpolation in ES6
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..!! 🙂
