在 React.js 中的 JSX 中条件渲染十进制代码

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

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>

Answer 2

Please refer to the following code:

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