---
title: Change Question Visibility
product: Form Library
description: Make sure respondents only see questions relevant to them by using the visibleIf property that allows you to make questions visible or invisible based on preconfigured conditions. View a free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Question Visibility (React)

SurveyJS Form Library allows you to show or hide any survey element based on certain criteria, for example, the response to the current question. With this capability, you can implement skip logic and branching in your survey.

To conditionally change the visibility of a survey page, panel, or question, specify its [`visibleIf`](/form-library/documentation/api-reference/question#visibleIf) property. It accepts a Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). The survey element becomes visible when this expression evaluates to `true`. In this demo, a survey displays additional questions depending on the value you select in the NPS question. Refer to the following help topic for more information: [Conditional Visibility](/form-library/documentation/design-survey/conditional-logic#conditional-visibility).

## 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 = {
  "title": "NPS Survey Question",
  "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
  "logoWidth": "200px",
  "logoHeight": "80px",
  "logoFit": "cover",
  "logoPosition": "right",
  "elements": [
    {
      "type": "rating",
      "name": "nps-score",
      "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
      "rateMin": 0,
      "rateMax": 10,
      "minRateDescription": "Very unlikely",
      "maxRateDescription": "Very likely"
    },
    {
      "type": "comment",
      "name": "disappointing-experience",
      "visibleIf": "{nps-score} <= 5",
      "title": "How did we disappoint you and what can we do to make things right?",
      "maxLength": 300
    },
    {
      "type": "comment",
      "name": "improvements-required",
      "visibleIf": "{nps-score} >= 6",
      "title": "What can we do to make your experience more satisfying?",
      "maxLength": 300
    },
    {
      "type": "checkbox",
      "name": "promoter-features",
      "visibleIf": "{nps-score} >= 9",
      "title": "Which of the following features do you value the most?",
      "description": "Please select no more than three features.",
      "isRequired": true,
      "choices": [
        {
          "value": "performance",
          "text": "Performance"
        },
        {
          "value": "stability",
          "text": "Stability"
        },
        {
          "value": "ui",
          "text": "User interface"
        },
        {
          "value": "complete-functionality",
          "text": "Complete functionality"
        },
        {
          "value": "learning-materials",
          "text": "Learning materials (documentation, demos, code examples)"
        },
        {
          "value": "support",
          "text": "Quality support"
        }
      ],
      "showOtherItem": true,
      "otherPlaceholder": "Please specify...",
      "otherText": "Other features",
      "colCount": 2,
      "maxSelectedChoices": 3
    }
  ]
};
```

### `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/implement-conditional-logic-to-change-question-visibility/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vanillajs.md)