React is rendering a 0 when condition fails

Question

I'm getting a 0 being rendered on the page when showScore is false

<div>
   { !isObjectEmpty(userReport) &&
     <div className={'data'}>
       {showScore && <span><FaTrophy/> {score}</span>}
     </div>
   }
</div>

CSS for this div

padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 0.8em;
font-weight: bold;
background-color: rgba(255,255,255,0.5);

Any ideas why I would get a 0 in the page instead of nothing when showScore is false?

Tu Nguyen · Accepted Answer · 2018-10-12 03:46:33Z

1

In case you're trying to display nothing instead of a 0, you might try this:

{ showScore ? (<span><FaTrophy/> {score}</span>) : '' }

edited Oct 12, 2018 at 3:46

answered Oct 12, 2018 at 3:41

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React is rendering a 0 when condition fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related