Conditional rendering & lists
Since views are built with React,
conditional rendering and
rendering lists work just like they do in React!
Conditional rendering
Conditional rendering
tsxCopied1const checkboxState = useComponentState("happyCheckbox");2let rainbows = null;3if (checkboxState.checked) {4rainbows = <Text>Rainbows</Text>;5}6return (7<Stack spacing="sm">8<Checkbox id="happyCheckbox" label="Show happy things" defaultChecked />9{/* Inline using && operator */}10{checkboxState.checked && <Text>Butterflies</Text>}11{/* Renders if not null */}12{rainbows}13{/* Inline if-else */}14{checkboxState.checked ? null : <Text>Demons</Text>}15</Stack>16);
Rendering components in a list
Rendering components in a list
tsxCopied1{cats.map((cat) => (2<Card key={cat.name}>3<Text>{cat.name}</Text>4<Text>{cat.breed}</Text>5</Card>6))}