Skip to main content

JSX Branching ↔ Design Pattern for

Branching​

if-else logic

Early return, render nothing​

abort early, return null. Less computation for faster performance

Replace if-else with Ternary Operator

Use Truthy-Falsy for optional rendering - combine Short-Circuiting with Components

Object to map Component switch object map for various icon states

cost myIcon = {
  food: <FoodIcon /\>,
  car: <CarIcon /\>,
  home: <HomeIcon /\>
}

Extra components for complex branching

Inline Comments within [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx)`
{/* must wrap as expression, for new lines only */}` 
`{// Single line comment must terminate next line
}`

Map array to list of JSX objects

Warning: Each child in a list should have a unique "key" prop

key must be unique within local array; else can reuse across App or Component

References​