The early days of the web felt like the wild west when it came to coding practices — just make it work. Then we became enlightened to better practices, separating HTML from CSS and JavaScript. Then came React and JSX, where we combine JavaScript, HTML, and even CSS with Styled Components — what an elegant mess we’ve made!
Every once in a while part of that mess is me seeing 0 displaying in the output of my JSX code, and I’m reminded why: improper handling of variable typing, combined with using &&. Let me explain!
One of the popular patterns in JSX is:
<div>Some header</div>
{someValue && <div>Some header</div>}
The pattern makes sense but check out the difference in outputs between string and number types:
"0" && "Thing" > "Thing" 0 && "Thing" > 0
Note that a string value of 0 allows the second value to be returned, but a number typed 0 simply returns the 0. The best practice is always to cast the value to a Boolean in your JSX:
{Boolean(value) && ....}
Typescript and even PropTypes can help to catch these issues but even seasoned veterans sometimes hit these pain points.
Contents
7 Essential JavaScript Functions
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like
addEventListenerandattachEvent. Times have changed but there are still a few functions each developer should…JavaScript Promise API
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why “hold up the show” when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world…
MooTools Fun with Fx.Shake
Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter…
Fullscreen API
As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit…
[ad_2]
Source link
