---
title: Expression
product: Form Library
description: Expression is a read-only question type that dynamically calculates values based on user input or predefined variables. This free demo for JavaScript shows how expressions can be used to estimate the total cost of a pizza order in real-time by multiplying the quantity by the price for each item on the menu and summing up these values.
framework: React
source: https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---
# Expression (React)
Expression is a read-only question type used to dynamically calculate values based on user input or predefined variables and display the calculated values in your form or survey. In this demo, expression questions calculate the cost of each pizza based on selected size and quantity and add up the costs to display the total of an order.
To create an Expression question, add an object to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array and specify the following properties within this object:
- `type`
A question [type](https://surveyjs.io/form-library/documentation/api-reference/expression-model#getType). Set this property to `"expression"`.
- [`name`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#name)
A unique name that identifies the question.
- [`title`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#title)
A title for the question.
- [`expression`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#expression)
An expression used to calculate the value you want to display (see [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions)).
- *(Optional)* [`description`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#description)
Explanatory text displayed under the title.
Refer to the `json.js` file listing for more information.
## Files
### `public/index.html`
```html
```
### `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 ();
}
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();
```
### `src/json.js`
```js
export const json = {
"elements": [
{
"type": "panel",
"name": "neapolitan",
"elements": [
{
"type": "expression",
"name": "price_n",
"minWidth": "220px",
"title": "Pizza Neapolitan",
"description": "tomato sauce, mozzarella, anchovies, bazil",
"expression": "5 + {size_n}",
"displayStyle": "currency"
},
{
"type": "image",
"name": "pic_n",
"width": "180px",
"minWidth": "180px",
"maxWidth": "180px",
"startWithNewLine": false,
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=c5b0302a-d6c8-46b4-ac57-7d519d0df0d1",
"contentMode": "image",
"imageFit": "cover",
"imageHeight": 80,
"imageWidth": 180
},
{
"type": "dropdown",
"name": "size_n",
"minWidth": "220px",
"title": "Size",
"titleLocation": "left",
"defaultValue": 1,
"choices": [
{ "value": 0, "text": "Small" },
{ "value": 1, "text": "Medium" },
{ "value": 2, "text": "Large" }
],
"allowClear": false
},
{
"type": "dropdown",
"name": "qty_n",
"minWidth": "220px",
"startWithNewLine": false,
"title": "Qty",
"titleLocation": "left",
"choices": [ 1, 2, 3, 4, 5 ]
}
]
},
{
"type": "panel",
"name": "pepperoni",
"elements": [
{
"type": "expression",
"name": "price_p",
"title": "Pepperoni",
"description": "tomato sauce, pepperoni, red peppers, onion",
"expression": "5 + {size_p}",
"displayStyle": "currency"
},
{
"type": "image",
"name": "pic_p",
"width": "180px",
"minWidth": "180px",
"maxWidth": "180px",
"startWithNewLine": false,
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=8bcd88b7-df19-466d-8622-19100e400383",
"contentMode": "image",
"imageFit": "cover",
"imageHeight": 80,
"imageWidth": 180
},
{
"type": "dropdown",
"name": "size_p",
"minWidth": "220px",
"title": "Size",
"titleLocation": "left",
"defaultValue": 1,
"choicesFromQuestion": "size_n",
"allowClear": false
},
{
"type": "dropdown",
"name": "qty_p",
"minWidth": "220px",
"startWithNewLine": false,
"title": "Qty",
"titleLocation": "left",
"choicesFromQuestion": "qty_n"
}
]
},
{
"type": "panel",
"name": "marinara",
"elements": [
{
"type": "expression",
"name": "price_m",
"title": "Marinara",
"description": "tomato sauce, tuna, shrimps, mushrooms, cheese, onion",
"expression": "5 + {size_m}",
"displayStyle": "currency"
},
{
"type": "image",
"name": "pic_m",
"width": "180px",
"minWidth": "180px",
"maxWidth": "180px",
"startWithNewLine": false,
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=24735b69-0ffe-4e49-9c90-1d9db1c8b83b",
"contentMode": "image",
"imageFit": "cover",
"imageHeight": 80,
"imageWidth": 180
},
{
"type": "dropdown",
"name": "size_m",
"minWidth": "220px",
"title": "Size",
"titleLocation": "left",
"defaultValue": 1,
"choicesFromQuestion": "size_n",
"allowClear": false
},
{
"type": "dropdown",
"name": "qty_m",
"minWidth": "220px",
"startWithNewLine": false,
"title": "Qty",
"titleLocation": "left",
"choicesFromQuestion": "qty_n"
}
]
},
{
"type": "expression",
"name": "total",
"title": "Total",
"expression": "{price_n} * {qty_n} + {price_m} * {qty_m} + {price_p} * {qty_p}",
"displayStyle": "currency"
}
],
"questionErrorLocation": "bottom"
};
```
### `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/expression-question-for-dynamic-form-calculations/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/vanillajs.md)