---
title: Background Calculations
product: Form Library
description: Learn how to create a custom variable to perform real-time background calculations in your survey. You can display the calculated value in other questions or save it alongside the respondent's answers. View our demo for JavaScript to see it in action.
framework: React
source: https://surveyjs.io/form-library/examples/custom-variables-for-background-form-calculations/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Background Calculations (React)

Custom variables serve as intermediate or auxiliary variables that perform various calculations in the background within the survey's JSON schema as respondents answer questions. These calculations are based on [expressions](/form-library/documentation/design-survey/conditional-logic#expressions) and support [built-in](/form-library/documentation/design-survey/conditional-logic#built-in-functions) and [custom functions](/form-library/documentation/design-survey/conditional-logic#custom-functions). In this demo, background calculations are used to combine a full name from the provided first and last names and to calculate a respondent's age based on their birthdate.

To create a custom variable for background calculations, populate the `SurveyModel`'s [`calculatedValues`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#calculatedValues) array with objects of the following structure:

```js
{
  name: string; // A name that identifies the calculated value.
  expression: string // An expression that returns the calculated value.
  includeIntoResult: boolean; // Specifies whether to include the calculated value in survey results.
}
```

Calculated values can be used in display texts and expressions. In this demo, for instance, calculated values are displayed within an HTML element of a survey.

## 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 = {
    "elements": [
      {
        "type": "html",
        "name": "question1",
        "visibleIf": "{first-name} notempty and {last-name} notempty and {birthdate} notempty",
        "html": "<p style=\"text-align:center\"><b style=\"font-size:24px\">Hello, {full-name}!<br>Your age is {age} years.</b></p>"
      },
      {
        "type": "text",
        "name": "first-name",
        "title": "First name:",
        "defaultValue": "John"
      },
      {
        "type": "text",
        "name": "last-name",
        "title": "Last name:",
        "defaultValue": "Smith"
      },
      {
        "type": "text",
        "name": "birthdate",
        "title": "Birthdate:",
        "inputType": "date",
        "defaultValue": "1987-05-21"
      }
  ],
  "calculatedValues": [
    {
      "name": "full-name",
      "expression": "{first-name} + ' ' + {last-name}"
    },
    {
      "name": "age",
      "expression": "age({birthdate})"
    }
  ],
  "questionTitleLocation": "left"
};
```

### `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/custom-variables-for-background-form-calculations/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/custom-variables-for-background-form-calculations/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/custom-variables-for-background-form-calculations/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/custom-variables-for-background-form-calculations/vanillajs.md)