Conditional rendering & lists

Since views are built with React, conditional rendering and rendering lists work just like they do in React!

Conditional rendering

tsx
Copied
1
const checkboxState = useComponentState("happyCheckbox");
2
let rainbows = null;
3
if (checkboxState.checked) {
4
rainbows = <Text>Rainbows</Text>;
5
}
6
return (
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

tsx
Copied
1
{cats.map((cat) => (
2
<Card key={cat.name}>
3
<Text>{cat.name}</Text>
4
<Text>{cat.breed}</Text>
5
</Card>
6
))}