Getting started with Conditional Rendering
Conditional rendering allows you to create advanced components with elements that are rendered only when certain conditions are met. You can easily define and set up the conditions to be triggered in any way you want.
The most common setup you can use is by defining the following: create a first Element “A” that will only be displayed when triggered by an event happening on an Element “B”.
With conditional rendering it’s easy to create more complex components such as: image carousels, accordions, tabs, mobile menus, even complex dashboards.
Here is a quick summary of what you will find in this article:
How to enable Conditional Rendering
Using the “States” tab
Conditional rendering switch
“Events” tab
Treeview markers
Example: Creating a simple tab selector
Conditional Rendering is currently an advanced feature and works only when editing components.
To enable this feature go to Project settings -> Advanced features and switch the toggle to enable Conditional rendering.
Once it’s enabled, you will see available a few new options when editing a component in the editor:
A new “State” tab in the Setup panel
Conditional Rendering switch when selecting an element
The “Events” tab in the Right panel
To access the new State tab, open a component and then click the Setup button in the top right corner of the canvas.
In the panel that opens, you can create new States.
A piece of state is just a variable available in the component scope. You can bind any element inside of the component to this variable and define a condition/rule on which the element will be rendered (displayed) or not.
There are three types of states that you can create:
Boolean: the element will be rendered if the condition is either true or false
String: the element will be rendered if the condition matches the string
Number: the element will be rendered if the condition matches a number
You can define as many states you want to for a component.
In the States tab you will also get a breakdown of the conditionally rendered elements and of the elements that trigger changes in states so that you can easily follow all the pieces.
You can see how this works in the example described at the end of the article.
To make an element from your component to be rendered conditionally, you will need to select it, then go to the Right panel and click on the Conditional Rendering switch (it is the first section in the Right panel).
After enabling Conditional rendering you will be able to select the State (condition) and State value that makes this element render.
Example: Let’s say you create a boolean state (true or false). If you want to display the element when the state is true, you need to select the boolean state from the dropdown in the first input and make sure to select the value true in the second input.
In the events tab you can define the triggers that can modify a state value which was previously defined.
To add an event to an element, select the element, go to the Right panel in the Events tab, select an Event type, Action, State to be modified and State value to be modified.
Here is the meaning of all these options:
A. Event type
There are two Types of events that you can create:
B. Event actions
Actions define the way in which the trigger is activated. There are multiple types of action that you can choose from, including:
These are just some examples of the actions you can use.
C. Modifies - this field contains the state you want to modify when an event is triggered.
D. To - this field contains the value of the state you want to have when the event is triggered.
Below the Create Event section you will find the Events Manager section where you will get a breakdown of all the Events defined for this element.
You can add however many events you want on an element.
To help you navigate through all of these interactions you can use the markers in the Files and layers (treeview):
The green C - it means that the element is conditionally rendered because its state matches the current state value
The red C - it meant that the element is NOT conditionally rendered because its state does NOT match the current state value
The event icon - The element triggers an event
Let’s go over how to build a simple tab selector with three tabs.
First, create the tabSelector state in the States tab. This is a number state with the default value of 0.
Next, to make the tabs to conditionally render you need to check the Conditional rendering switch for each of the tab containers and added the rules so that the render will happen:
Next add events on the three triggers above the tabs:
Here’s how the rules will look in the States tab:
This is a very simple example but the options that conditional rendering opens up are very diverse.
Conditionally rendered elements will not be displayed properly when previewing a project. To test your component, enable Developer mode from Project settings, activate it and sync the project to view it in the Developer mode preview.
If you want another example on using Conditional rendering to create an image slideshow check out this article.
The most common setup you can use is by defining the following: create a first Element “A” that will only be displayed when triggered by an event happening on an Element “B”.
With conditional rendering it’s easy to create more complex components such as: image carousels, accordions, tabs, mobile menus, even complex dashboards.
Here is a quick summary of what you will find in this article:
How to enable Conditional Rendering
Using the “States” tab
Conditional rendering switch
“Events” tab
Treeview markers
Example: Creating a simple tab selector
How to enable Conditional rendering
Conditional Rendering is currently an advanced feature and works only when editing components.
To enable this feature go to Project settings -> Advanced features and switch the toggle to enable Conditional rendering.
Once it’s enabled, you will see available a few new options when editing a component in the editor:
A new “State” tab in the Setup panel
Conditional Rendering switch when selecting an element
The “Events” tab in the Right panel
“States” tab
To access the new State tab, open a component and then click the Setup button in the top right corner of the canvas.
In the panel that opens, you can create new States.
A piece of state is just a variable available in the component scope. You can bind any element inside of the component to this variable and define a condition/rule on which the element will be rendered (displayed) or not.
There are three types of states that you can create:
Boolean: the element will be rendered if the condition is either true or false
String: the element will be rendered if the condition matches the string
Number: the element will be rendered if the condition matches a number
You can define as many states you want to for a component.
In the States tab you will also get a breakdown of the conditionally rendered elements and of the elements that trigger changes in states so that you can easily follow all the pieces.
You can see how this works in the example described at the end of the article.
The Conditional rendering switch
To make an element from your component to be rendered conditionally, you will need to select it, then go to the Right panel and click on the Conditional Rendering switch (it is the first section in the Right panel).
After enabling Conditional rendering you will be able to select the State (condition) and State value that makes this element render.
Example: Let’s say you create a boolean state (true or false). If you want to display the element when the state is true, you need to select the boolean state from the dropdown in the first input and make sure to select the value true in the second input.
“Events” tab
In the events tab you can define the triggers that can modify a state value which was previously defined.
To add an event to an element, select the element, go to the Right panel in the Events tab, select an Event type, Action, State to be modified and State value to be modified.
Here is the meaning of all these options:
A. Event type
There are two Types of events that you can create:
| stateChange - when the trigger is activated it changes the selected state | propCall - when the trigger will make a prop call |
B. Event actions
Actions define the way in which the trigger is activated. There are multiple types of action that you can choose from, including:
| Click - action is triggered on mouse click | Keypress - action is triggered when pressing a key on the keyboard | |
| Focus - action is triggered when element is focused (inputs) | MouseEnter - action is triggered when the mouse is within the element | |
| Change - action is triggered on inputs, selects or text area when the value is modified | Scroll - Action is triggered when a scroll action is performed | |
| Submit - action is triggered when a form is submitted |
These are just some examples of the actions you can use.
C. Modifies - this field contains the state you want to modify when an event is triggered.
D. To - this field contains the value of the state you want to have when the event is triggered.
Below the Create Event section you will find the Events Manager section where you will get a breakdown of all the Events defined for this element.
You can add however many events you want on an element.
Treeview markers
To help you navigate through all of these interactions you can use the markers in the Files and layers (treeview):
The green C - it means that the element is conditionally rendered because its state matches the current state value
The red C - it meant that the element is NOT conditionally rendered because its state does NOT match the current state value
The event icon - The element triggers an event
Example: How to create a simple tab selector
Let’s go over how to build a simple tab selector with three tabs.
First, create the tabSelector state in the States tab. This is a number state with the default value of 0.
Next, to make the tabs to conditionally render you need to check the Conditional rendering switch for each of the tab containers and added the rules so that the render will happen:
| Tab1 - tabSelector is equal to 1 | Tab2 - tabSelector is equal to 2 | Tab3 - tabSelector is equal to 3 |
Next add events on the three triggers above the tabs:
| Trigger1 - On click change tab selector to 1 - default value | Trigger2 - On click change tab selector to 2 | Trigger3 - On click change tab selector to 3 |
Here’s how the rules will look in the States tab:
| When clicking Trigger1 in the project, Tab1 will be rendered | When clicking Trigger2, then Tab2 will be rendered | When clicking Trigger3, Tab3 will be rendered |
This is a very simple example but the options that conditional rendering opens up are very diverse.
Conditionally rendered elements will not be displayed properly when previewing a project. To test your component, enable Developer mode from Project settings, activate it and sync the project to view it in the Developer mode preview.
If you want another example on using Conditional rendering to create an image slideshow check out this article.
Updated on: 01/03/2024
Thank you!