const legend = isCropLayerActive ? (
<div
className="layercontrol__legend"
onMouseOver={disableMapZoom}
onFocus={disableMapZoom}
onMouseOut={enableMapZoom}
onBlur={enableMapZoom}
>
{legendItems}
</div>
) : null;
- Easier to read
- Does not add mental burden of inversion
const legend = !isCropLayerActive ? null : (
<div
className="layercontrol__legend"
onMouseOver={disableMapZoom}
onFocus={disableMapZoom}
onMouseOut={enableMapZoom}
onBlur={enableMapZoom}
>
{legendItems}
</div>
);
- Better to look at
- Approximates the null-coalescing
??
operator - Gets
null
out of the way fast so the main block is made prominent
There's an alternate possible form we could consider which is...
A falsy value for
isCropLayerActive
will make the whole thing falsy, which gets treated asnull
in the rendering.