# Conditional rendering with view states

View states enable you to create dynamic interfaces by defining multiple states for your components. Each state can have its own layout, style, or behavior, and these states can be triggered based on conditions like props or user interactions.

### Key features of view states

* **Switch Between View States**
  * Create multiple "view-states" to define how your UI should look under different conditions.
  * Each state can have unique layouts or styles.
* **Set Up Conditional Rules**
  * Display or hide components dynamically based on props or user input.
  * Define rules to control when and how a state is triggered.
* **Interactive Previews**
  * Switch between states to see how your UI adapts in real-time.

## Create a new view state

1. Navigate to the **View States** tab in the left-hand toolbar.
2. Click the **'+'** button and give it a name, e.g., `isOpen`.

## Configure the view state

You can work with view states in two modes:

* **View Mode**: Enables previewing changes without affecting the state’s configuration. Any edits made in this mode will not be recorded.
* **Edit Mode**: Allows you to modify the canvas, and all changes will be saved as part of the active view state.

## Understanding responsiveness & view states

When designing responsive UIs, view states help you define layouts for different breakpoints.

Switching breakpoints in the editor (e.g., desktop to mobile) navigates between corresponding view states (`lg`, `md`, `xs`, etc.).

Any changes made in a specific breakpoint are automatically recorded in the relevant view state.

## Triggering view states in custom components

To dynamically trigger view states of a custom component from a parent component:

1. Add a **prop** to the custom component from the parent canvas with the same name as the view state, e.g., `isOpen`.
2. Set the prop type to **boolean**.
3. When the prop is set to `true`, the corresponding view state will activate.

***

## Benefits of conditional rendering

* Simplifies the process of creating dynamic UIs.
* Enables responsive design directly in the editor.
* Reduces the need for complex code by leveraging props and visual editing.

***

#### **Next Steps:**

You've mastered conditional rendering! Let's move on:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/jsx.design/styling-ui/interactive-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.