---
title: Asynchronous Functions in Expressions
product: Form Library
description: Explore this interactive demo for JavaScript showing how to use asynchronous functions in expression questions for dynamic survey content. Follow our step-by-step instructions to implement custom asynchronous functions in your SurveyJS form.
framework: React
source: https://surveyjs.io/form-library/examples/asynchronous-functions-in-expression-questions/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Asynchronous Functions in Expressions (React)

Expression questions support custom asynchronous functions that you can use for time-consuming operations, such as requests to a server. In this example, you can select a country from a drop-down list. Two Expression questions use asynchronous functions to load and display the selected country's region and official name.

To implement an asynchronous function for use in expressions, follow the steps below:

1. Declare an asynchronous JavaScript function.      
This function accepts all arguments in one array-like object. You can pass as many arguments as needed when you call the function from an expression. To return the function's result, pass it to the `this.returnResult` function.

    ```js
    function asyncFunc(params) {
        const arg1 = params[0];
        const arg2 = params[1];
        // ...
        setTimeout(() => {
            // Return the function result via the callback
            this.returnResult(yourValue);
        }, 100);
    }
    ```

1. Register your function.     
Call a static `registerFunction` method. It accepts a function name that you want to use in expressions, the function itself, and the `isAsync` flag that indicates an asynchronous function.

    ```js
    import { registerFunction } from "survey-core";

    registerFunction({
        name: "asyncFunc",
        func: asyncFunc,
        isAsync: true
    });
    ```

1. Use your function in an Expression question.     
Specify the question's [`expression`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#expression) property.

    ```js
    const surveyJson = {
        "elements": [{
            "type": "expression",
            "name": "asyncExpression",
            // ...
            "expression": "asyncFunc({question1}, {question2})"
        }, {
            // ...
        }]
    };
    ```

1. *(Optional)* Hide an Expression question until it has a value.       
You may want to hide your Expression question until its asynchronous function has executed. To do it, set the [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#visibleIf) property to a Boolean expression that uses the `notempty` function. Refer to the following help topic for more information: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).

    ```js
    const surveyJson = {
        "elements": [{
            "type": "expression",
            "name": "asyncExpression",
            // ...
            "expression": "asyncFunc({question1}, {question2})",
            "visibleIf": "{asyncExpression} notempty"
        }, {
            // ...
        }]
    };
    ```

## 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";
import { registerFunction } from "survey-core";

function getCountryInfo(country, returnResultCallback, property) {
    if (!country) {
        returnResultCallback();
        return;
    }
    fetch("https://surveyjs.io/api/CountriesExample?name=" + country)
        .then(response => response.json())
        .then(data => {
            const countryInfo = data[0];
            returnResultCallback(countryInfo[property]);
        })
        .catch(error => {
            console.error("Error:", error);
        });
}

function getOfficialCountryName([country]) {
    return getCountryInfo(country, this.returnResult, "officialName");
}

function getCountryRegion([country]) {
    return getCountryInfo(country, this.returnResult, "region");
}
  
registerFunction({
    name: "getOfficialCountryName",
    func: getOfficialCountryName,
    isAsync: true
});

registerFunction({
    name: "getCountryRegion",
    func: getCountryRegion,
    isAsync: true
});
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 = {
  "checkErrorsMode": "onValueChanged",
  "elements": [
    {
      "type": "dropdown",
      "name": "country",
      "title": "Select a country",
      "choicesByUrl": {
        "url": "https://surveyjs.io/api/CountriesExample",
        "valueName": "name"
      }
    },
    {
      "type": "expression",
      "name": "officialname",
      "title": "Official name of {country} is:",
      "expression": "getOfficialCountryName({country})",
      "visibleIf": "{officialname} notempty"
    },
    {
      "type": "expression",
      "name": "region",
      "title": "{country} is located in:",
      "expression": "getCountryRegion({country})",
      "visibleIf": "{region} notempty"
    }
  ]
};
```

### `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/asynchronous-functions-in-expression-questions/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/asynchronous-functions-in-expression-questions/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/asynchronous-functions-in-expression-questions/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/asynchronous-functions-in-expression-questions/vanillajs.md)