---
title: Property Dependencies
product: Survey Creator
description: Learn how to introduce property dependencies to survey elements and make one property of a question change its behavior depending on how the master property is configured. View a free demo for JavaScript.
framework: React
source: https://surveyjs.io/survey-creator/examples/configure-property-dependencies/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Property Dependencies (React)

Survey Creator allows survey element properties to change their behavior and visibility depending on the values of other properties. This demo illustrates how this functionality enables you to fill choices and control property visibility based on certain conditions.

To see this functionality in action, do the following:

- Conditional choices        
In the Property Grid, ensure that **Survey** is selected in the element selector and expand the Geo Location section. Change the "Region" property value and open the "Country" property editor. You should see that its choice list is filtered based on the selected region.

- Conditional visibility        
In the Property Grid, select **question1** from the element selector. Change the "Input type" property value to `date`, `datetime`, or `datetime-local`. You should see that the "Date format" property becomes visible. If you select another input type, "Date format" will be hidden.

To establish a dependency between properties, specify the `dependsOn` option for a dependent property. This option accepts an array of property names upon which the current property depends. When one of the listed properties changes, the dependent property reevaluates its `visibleIf` and `choices` functions. This behavior allows you to control the property visibility and fill choices conditionally. Refer to the following help topic for more information on how to configure custom survey element properties: [Add Custom Properties to the Property Grid](https://surveyjs.io/survey-creator/documentation/property-grid#add-custom-properties-to-the-property-grid).

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { Serializer } from "survey-core";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

Serializer.addProperty("survey", {
  name: "region",
  category: "Geo Location",
  categoryIndex: 1,
  choices: ["Africa", "Americas", "Asia", "Europe", "Oceania"],
});

Serializer.addProperty("survey", {
  name: "country",
  category: "Geo Location",
  dependsOn: [ "region" ],
  // Populate countries depending on the selected region
  choices: function (obj, choicesCallback) {
    if (!choicesCallback)
      return;
    const xhr = new XMLHttpRequest();
    const url = !!obj && !!obj.region
      ? "https://surveyjs.io/api/CountriesExample?region=" + obj.region
      : "https://surveyjs.io/api/CountriesExample";
    xhr.open("GET", url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function () {
      if (xhr.status === 200) {
        const response = JSON.parse(xhr.response);
        const result = [];
        result.push({ value: null });
        for (let i = 0; i < response.length; i++) {
          const item = response[i];
          const val = item.cioc;
          result.push({ value: val, text: item.name });
        }
        choicesCallback(result);
      }
    };
    xhr.send();
  }
});

Serializer.addProperty("text", {
  name: "dateFormat",
  dependsOn: [ "inputType" ],
  // Display "Date format" only if `inputType` is one of date types
  visibleIf: function(obj) {
    return (
      obj.inputType === "date" ||
      obj.inputType === "datetime" ||
      obj.inputType === "datetime-local"
    );
  },
  category: "general",
  visibleIndex: 7
});
function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    creator.JSON = {
     "pages": [
      {
       "name": "page1",
       "elements": [
        {
         "type": "text",
         "name": "question1"
        }
       ]
      }
     ]
    }
    creator.collapseAllPropertyGridCategories();
    creator.expandPropertyGridCategory("Geo Location");
    creator.showSidebar = true;
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `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 SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

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

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/vanillajs.md)