---
title: Simplify Cascade Conditions
product: Form Library
description: You can implement skip logic and branching for your surveys. Based on the response to the current question, one or more questions down the line may be either hidden or shown. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/conditional-logic-and-branching-in-surveys/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Simplify Cascade Conditions (React)

In a cascade condition, a question's visibility depends on the previous question, whose visibility, in turn, depends on a question before it, and so on. Cascade conditions may result in lengthy Boolean expressions because each expression must include conditions from previous cascade levels. In this example, questions form the following multi-level cascade:

`"tradeIn"` → `"make"` → `"model"` → `"year"` → `"mileage"`

Each question after `"tradeIn"` depends on the answer given to the previous question. Typical conditional visibility expressions ([`visibleIf`](/form-library/documentation/api-reference/question#visibleIf)) in this case look as follows:

```js
{
  "elements": [{
    "name": "tradeIn",
    "title": "Do you have a vehicle to trade in?"
  }, {
    "name": "make",
    "title": "Vehicle make",
    "visibleIf": "{tradeIn} = 'Yes'"
  }, {
    "name": "model",
    "title": "Vehicle model",
    "visibleIf": "{tradeIn} = 'Yes' and {make} notempty"
  }, {
    "name": "year",
    "title": "Model year",
    "visibleIf": "{tradeIn} = 'Yes' and {make} notempty and {model} notempty"
  }, {
    "name": "mileage",
    "title": "Approximate mileage (miles)",
    "visibleIf": "{tradeIn} = 'Yes' and {make} notempty and {model} notempty and {year} notempty"
  }]
}
```

As you can see, cascade conditions accumulate, and the `visibleIf` expressions for the lowest-level questions (`"year"`, `"mileage"`, etc.) include conditions of the higher-level questions.

To shorten expressions, you can set the [`clearInvisibleValues`](/form-library/documentation/api-reference/survey-data-model#clearInvisibleValues) property to `"onHidden"`. With this setting, expressions may take into account only the previous-level question. For example, the `"model"` question can use `visibleIf: "{make} notempty"` instead of repeating the `{tradeIn} = 'Yes'` condition from the previous level.

Without `clearInvisibleValues` set to `"onHidden"`, hidden questions retain their values. If you used shorter expressions in this case, a change in a higher-level question wouldn't propagate down the cascade, and lowest-level questions would remain visible even though questions upon which they depend were hidden.

To see the abbreviated `visibleIf` expressions, view the survey JSON schema in the **Code** tab.

Note that this simplification also slightly changes the behavior. If a question had a value before hiding, this value will not reappear when the question becomes visible again. If this is not the desired behavior, we recommend using lengthy expressions.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "clearInvisibleValues": "onHidden",
  "elements": [
    {
      "type": "radiogroup",
      "name": "tradeIn",
      "title": "Do you have a vehicle to trade in?",
      "isRequired": true,
      "choices": [ "Yes", "No" ],
      "colCount": 0
    },
    {
      "type": "dropdown",
      "name": "make",
      "title": "Vehicle make",
      "visibleIf": "{tradeIn} = 'Yes'",
      "isRequired": true,
      "choices": [ "Toyota", "Honda", "Ford", "Chevrolet", "BMW", "Mercedes-Benz", "Other" ]
    },
    {
      "type": "text",
      "name": "model",
      "title": "Vehicle model",
      "visibleIf": "{make} notempty",
      "isRequired": true
    },
    {
      "type": "dropdown",
      "name": "year",
      "title": "Model year",
      "visibleIf": "{model} notempty",
      "isRequired": true,
      "choicesMin": 1990,
      "choicesMax": 2026
    },
    {
      "type": "text",
      "name": "mileage",
      "title": "Approximate mileage (miles)",
      "visibleIf": "{year} notempty",
      "inputType": "number",
      "isRequired": true
    }
  ]
}
;
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/conditional-logic-and-branching-in-surveys/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/conditional-logic-and-branching-in-surveys/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/conditional-logic-and-branching-in-surveys/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/conditional-logic-and-branching-in-surveys/vanillajs.md)