CODEWITHSUNDEEP
reactjs
DarkTrick
DarkTrick

Reputation: 3467

ReactJS: How to print html symbols within expressions

Goal (abstract)

I want that {'&lt;'} gets rendered as < and not as &lt;.

Actual problem at hand:

let value1 = '&lt;'
let value2 = '&gt;'

return (<div>
            {mycondition ? value1 : value2}
        </div>
       )

I've tried

I've tried {<>&lt;</>} and <>{&lt;}</>, but both didn't help.

Upvotes: 2

Views: 422

Answers (2)

Jack Davenport
Jack Davenport

Reputation: 66

The problem is likely that it's interpreting the strings as actual text rather than HTML entities, so they're being escaped before rendering.

As per Mr.Gandhi's answer, you probably want to wrap them in a React fragment so that they are treated as actual HTML entities. Don't forget you can also store JSX values in variables, so your code could be reformatted to:

let value1 = <>&lt;</>;
let value2 = <>&gt;</>;

return (<div>
        {mycondition ? value1 : value2}
    </div>
);

Upvotes: 3

Nikhil G
Nikhil G

Reputation: 2466

Try this:

{<>&#60;</>} //<--- This will print <

{<>&#62;</>} //<--- This will print >

Upvotes: 1

Related Questions