Conditional rendering decimal codes in JSX in React.js

Question

I'm trying to render an ✕ and ✓, conditionally with JSX, but this approach doesn't work.

<div>{exists ? &#10003; : &#10005;}</div>

What would be the right solution for achieving this?

Answer 1

Please refer to the following code:

{exists ? <div>&#10005;</div> : <div>&#10003;</div>}

Answer 2

You have to wrap that using span and span should have an attribute of role="img" otherwise React will show warning.

<div>{true ? <span role="img">&#10003;</span> : <span role="img">&#10005;</span>}</div>