Create advanced components using 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

How to enable Conditional rendering

Conditional Rendering is currently an experimental feature and works only when editing components.

To enable this feature go to Project settings -> Experimental features and switch the toggle to enable Conditional rendering.

Enabling conditional rendering feature

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.

States tab while editing a component

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

Types of states

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.

Enabling and setting up conditional rendering

“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
Focus - action is triggered when element is focused (inputs)
Change - action is triggered on inputs, selects or text area when the value is modified
Submit - action is triggered when a form is submitted
Keypress - action is triggered when pressing a key on the keyboard
MouseEnter - action is triggered when the mouse is within the element
Scroll - Action is triggered when a scroll action is performed

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.

Adding events to a trigger element

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.

Events manager on a trigger 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

Conditional rendering markers in the treeview

Example: How to create a simple tab selector

Let’s go over how to build a simple tab selector with three tabs.

Tab selector example with conditional rendering

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 0
Tab2 - tabSelector is equal to 1
Tab3 - tabSelector is equal to 2

Next add events on the three triggers above the tabs:

Trigger1 - On click change tab selector to 0 - default value
Trigger2 - On click change tab selector to 1
Trigger3 - On click change tab selector to 2

Here’s how the rules will look in the States tab:

Trigger and rendered elements 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.
Was this article helpful?
Cancel
Thank you!