Conditional rendering & rendering lists

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
);

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