Conditional rendering
Occasionally you will want to conditionally render components. You can attach a if={...}
attribute to any component in order to render it based on the result of the expression.
Conditional rendering is primarily used with user preferences.
If
To conditionally render a components, add the if={ ... }
attribute to it:
<Card if={ 2 > 4 }>
I won't be shown
</Card>
<Card if={ true }>
But I will!
</Card>
else
You can combine an if
component with an else
component.
<Card if={ false }>
I won't be rendered
</Card>
<Card else>
But I will!
</Card>
elseif
You can finally also use elseif
for more complex scenarios.
<Card if={ false }>
I won't be rendered
</Card>
<Card elseif={ false }>
I also won't be rendered
</Card>
<Card else>
But I will!
</Card>
A note about sibling components
Components with if
and else
must be sibling elements. When exactly elements are siblings can sometimes be unintuitive due to how Markdown and our components system handles inline and block components.
You may encountered an error like this when dealing with if/else statements:
Conditional should start with an "if"
55 │
56 │ <Button else href="/">Second</Button>
▲
└─ Replace "else" with "if"
This may mean that the elements aren't siblings.
Sibling inline elements
When the start and end tag of the component (or HTML element) are on the same line, they're parsed as inline components. This means that they get wrapped in a block level component, which in this case is a paragraph tag.
These two buttons are siblings:
<Button href="/">First</Button>
<Button href="/">Second</Button>
But these aren't.
<Button href="/">First</Button>
<Button href="/">Second</Button>
In the first example, the document is parsed as a single paragraph, as follows:
- paragaph
- Button
- Button
The second one is parsed as two paragraphs due to the additional newline, causing the buttons to no longer be next to each other:
- paragaph
- Button
- paragaph
- Button
Sibling block elements
When the start and end tag of the component (or HTML element) are on different lines, they're parsed as block components. You can take the button examples above and make them block components as like this:
<Button href="/">
First
</Button>
<Button href="/">
Second
</Button>
With block-level components, blank lines are optional. The two elements will be siblings with or without the blank line, and won't be wrapped in a paragraph tag.