liveBook · Manning

Optional rendering

As explained in React Quickly, Second Edition

Optional rendering conditionally includes an interface element when a predicate is satisfied and produces no element otherwise.

Optional rendering includes an interface element only when a condition is true; otherwise, React renders nothing. In JSX, the logical AND pattern keeps this case concise. section 3.2.6

Verified-user checkmark

A username can append a checkmark only for verified users: {this.props.isVerified && <Checkmark />}. Logical AND returns the element when the condition is truthy and false otherwise; React renders false as empty output. section 3.2.6

How React Quickly, Second Edition covers it

How deep it goes
Explains ternaries, logical short-circuiting, truthiness, null returns, and object-based switching, without deeper React internals.
Examples
Demonstrates verified-user checkmarks, shopping carts, countdowns, online status, post icons, and checkout controls.
What it assumes
Assumes basic JavaScript expressions and React components while teaching truthy and falsy values explicitly.
What you can do after
Apply it via JSX to show, hide, or select interface elements based on component props and state.
How it connects
Connects JSX with ternary operators, logical operators, truthiness, React components, and conditional rendering.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.