Branching selects different UI paths or outputs according to conditions. In JSX, use familiar JavaScript constructs to decide what a React component renders. section 3.2.6
Choose a pattern based on the rendering decision:
- Return null early when the component should render nothing. section 3.2.6
- Use a ternary operator for two alternative elements, such as online versus offline status or an empty versus populated cart. section 3.2.6
- Use && for optional elements, such as a verification checkmark or an address-dependent button. section 3.2.6
- Use object maps for several named alternatives, and split complex conditions into extra components. section 3.2.6
Shopping cart decisions
A cart can branch on login state, payment details, shipping address, item availability, and whether it contains items. Separate UserButtons and GuestButtons components make those conditions easier to follow than one deeply nested render. section 3.2.6
class Countdown extends Component {
render() {
if (this.props.remaining === 0) {
return null;
}
const seconds = this.props.remaining % 60;
const minutes = Math.floor(this.props.remaining / 60);
return <p>{minutes}:{seconds}</p>;
}
}
The early-return Countdown implementation checks whether time remains before calculating display values or creating JSX. section 3.2.6
