JavaScript is full of tricks that you don’t know you want until you … want … them. Or maybe just until you see them. One trick I recently realized was conditionally adding attributes to React elements. Of course this trick essentially boils down to conditionally adding properties to an Object, but let’s not dive too far into specificities — let’s jump into the code.
To conditionally add properties to an object, we’ll use a conditional and destructuring:
const someObj = { prop3: 'Arsenal!' };
const obj = {
prop1: "value1",
prop2: "value2",
...(someObj ?? {})
}
And to conditionally add these properties to a React component, you could do:
<MyComponent
prop1="value1"
prop2="value2"
...(someObj ?? {})
/>
In many cases, it doesn’t matter if you have extra keys (and their values) on your objects, but if you run a tight ship with dictionary objects or use Object.keys, you’ll want to use this technique.
Have any other Object tricks? Please share them!
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
MooTools dwCheckboxes Plugin
Update / Fix: The checkboxes will no longer toggle when the “mouseup” event doesn’t occur on a checkbox. Every morning I wake up to a bunch of emails in my Gmail inbox that I delete without reading. I end up clicking so many damn checkboxes…
jQuery Wookmark
The first thing that hits you when you visit Pinterest is “Whoa, the columns are the same width and the photos are cut to fit just the way they should.” Basic web users probably think nothing of it but as a developer, I can appreciate the…
