Conditional logic chooses which JSX a React component renders. Because JSX is JavaScript, components can use familiar conditions while following patterns suited to rendering interfaces. section 3.2.6 section 3.7
Choose the pattern that matches the branching job:
- Return early when the component should render nothing, usually by returning null before unnecessary calculations or JSX creation. section 3.2.6
- Use the ternary operator when a condition selects between two alternative elements, such as an empty or populated shopping cart. section 3.2.6
- Use the logical AND operator for optional elements, such as displaying a verification checkmark only for verified users. section 3.2.6
- Use object maps for several alternatives and separate components when the branching becomes complex. section 3.2.6
A countdown that disappears at zero
Check the stopping condition first, return null when no countdown remains, and calculate minutes and seconds only for visible output. section 3.2.6
