Fix Seeing “0” in Your JSX Code

The early days of the online felt just like the wild west when it got here to coding practices — simply make it work. Then we turned enlightened to raised practices, separating HTML from CSS and JavaScript. Then got here React and JSX, the place we mix JavaScript, HTML, and even CSS with Styled Parts — what a sublime mess we have made!

Each from time to time a part of that mess is me seeing 0 displaying within the output of my JSX code, and I am reminded why: improper dealing with of variable typing, mixed with utilizing &&. Let me clarify!

One of many widespread patterns in JSX is:

<div>Some header</div>
{someValue && <div>Some header</div>}

The sample is sensible however take a look at the distinction in outputs between string and quantity varieties:

"0" && "Factor"
> "Factor"
0 && "Factor"
> 0

Observe {that a} string worth of 0 permits the second worth to be returned, however a quantity typed 0 merely returns the 0. The perfect apply is at all times to forged the worth to a Boolean in your JSX:

{Boolean(worth) && ....}

Typescript and even PropTypes may also help to catch these points however even seasoned veterans generally hit these ache factors.