JSX Ternary Conditional Assignment

README.md

JSX Ternary Conditional Assignment

Straight

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

Inverted

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...

const legend = isCropLayerActive && (
    <div
        className="layercontrol__legend"
        onMouseOver={disableMapZoom}
        onFocus={disableMapZoom}
        onMouseOut={enableMapZoom}
        onBlur={enableMapZoom}
    >
        {legendItems}
    </div>
);

A falsy value for isCropLayerActive will make the whole thing falsy, which gets treated as null in the rendering.

Alternatively:

// app.js
<parentComponent>
    <legend isLegendShown={isLegendShown} />
</parentComponent>

// legend.js
...

render() {
   if (this.props.isLegendShown) {
       return (
           <div
               className="layercontrol__legend"
               onMouseOver={disableMapZoom}
               onFocus={disableMapZoom}
               onMouseOut={enableMapZoom}
               onBlur={enableMapZoom}
           >
               {legendItems}
            </div>
        );
    } else {
        return null;
    }
}