Use `&&` in JSX when an element should appear only if a condition is true: `{isVerified && <Checkmark />}`. JavaScript evaluates the left operand first. If it is falsy, the expression returns that value without evaluating the element; otherwise, it returns the element. section 3.2.6 section 3.4.3
Avoid a stray zero
A shopping cart might use `{items.length && <button>Checkout</button>}`. When the cart is empty, `items.length` is `0`, so the expression returns `0`—and JSX displays it. Use a Boolean comparison instead: `{items.length > 0 && <button>Checkout</button>}`. Now an empty cart produces `false`, which displays nothing. section 3.4.3
class ShoppingCart extends Component {
render() {
const hasItems = this.props.items.length > 0; #1
return (
<aside>
<h1>Shopping cart</h1>
<CartItems items={this.props.items} />
{hasItems && <button>Checkout</button>} #2
</aside>
);
}
}
The complete cart component names the Boolean condition `hasItems` before using it to show the Checkout button. section 3.4.3
Keep `&&` for optional elements. Use a ternary when you need one element or another; for more complex branching, consider a separate component. section 3.2.6
