---
title: Dynamic Panel with Repeating Group of Fields
product: Form Library
description: With SurveyJS, you can set up dynamic forms with repeating groups of fields. Enable respondents to effortlessly add fresh copies of the same fields on the fly to list multiple instances of education, places of work, and more. Check our this free JavaScript demo showcasing the duplicate group option to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Dynamic Panel with Repeating Group of Fields (React)

If you want to set up a form with a group of repeating fields, for example, to list respondents' qualifications or places of work, use a Dynamic Panel element. It enables respondents to add a fresh copy of the same form fields on the fly.

## Create a Dynamic Panel

To add a Dynamic Panel to your survey or form, define an object with the `type` property set to `"paneldynamic"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify Dynamic Panel's [`title`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#name) that identifies the panel. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#description) to place under the `title`.

## Configure Form Fields to Duplicate

A Dynamic Panel contains entries with duplicated content. This content is based on a template that you can configure using the [`templateElements`](/form-library/documentation/api-reference/dynamic-panel-model#templateElements) array. Populate this array with configuration objects of survey questions and panels as shown in this demo.

Panel entries also can display titles and descriptions based on templates. Use the [`templateTitle`](/form-library/documentation/api-reference/dynamic-panel-model#templateTitle) and [`templateDescription`](/form-library/documentation/api-reference/dynamic-panel-model#templateDescription) properties to specify these templates.

If you need to reference an entry index in dynamic texts (titles, descriptions, etc.), use the `{panelIndex}` and `{visiblePanelIndex}` placeholders. They contain panel indices within the collections of all or only visible panels, respectively. These indices start with 1.

## Access Nested Questions

When you implement an expression or configure dynamic text, you may need to access questions within the same panel entry. To do this, use the `panel` prefix: `{panel.my-question}`. Refer to any expression in this demo for an example.

If you want to access an entry question from outside the panel entry, use the entry's index: `{my-dynamic-panel[0].my-question}`.

## Add and Delete Panel Entries

Respondents can add and delete panel entries at runtime. If respondents should confirm deletion, enable the [`confirmDelete`](/form-library/documentation/api-reference/dynamic-panel-model#confirmDelete) property. If you want to disallow respondents to add and delete entries, disable the [`allowAddPanel`](/form-library/documentation/api-reference/dynamic-panel-model#allowAddPanel) and [`allowRemovePanel`](/form-library/documentation/api-reference/dynamic-panel-model#allowRemovePanel) properties.

A Dynamic Panel also allows you to add or delete an entry by calling the [`addPanel()`](/form-library/documentation/api-reference/dynamic-panel-model#addPanel) and [`removePanel()`](/form-library/documentation/api-reference/dynamic-panel-model#removePanel) methods. `removePanel()` accepts an entry index or [`PanelModel`](/form-library/documentation/api-reference/panel-model) instance as an argument. Before calling these methods, use `SurveyModel`'s [`getQuestionByName(name)`](/form-library/documentation/api-reference/survey-data-model#getQuestionByName) method to access a Dynamic Panel:

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

const survey = new Model(json);
const panel = survey.getQuestionByName("my-dynamic-panel");
```

You can also add one or more identical entries at startup. To do this, assign a number to the [`panelCount`](/form-library/documentation/api-reference/dynamic-panel-model#panelCount) property.

## Limit the Number of Entries

If you want to specify the minimum or maximum number of panel entries users can add, set the [`minPanelCount`](/form-library/documentation/api-reference/dynamic-panel-model#minPanelCount) and [`maxPanelCount`](/form-library/documentation/api-reference/dynamic-panel-model#maxPanelCount) properties. On reaching the limit, Dynamic Panel automatically hides buttons that add or delete entries. In this demo, a Dynamic Panel disallows you to add more than 10 entries.

## 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": "paneldynamic",
      "name": "vacation-info",
      "title": "Enter information about your vacations",
      "panelCount": 1,
      "maxPanelCount": 10,
      "confirmDelete": true,
      "templateElements": [
        {
          "type": "dropdown",
          "name": "country",
          "title": "Select a country",
          "choicesByUrl": {
            "url": "https://surveyjs.io/api/CountriesExample",
            "valueName": "name"
          }
        },
        {
          "type": "text",
          "name": "start-date",
          "title": "Select a vacation start date",
          "defaultValueExpression": "today()",
          "inputType": "date",
          "visibleIf": "{panel.country} notempty"
        },
        {
          "type": "text",
          "name": "end-date",
          "startWithNewLine": false,
          "title": "Select a vacation end date",
          "defaultValueExpression": "today(10)",
          "validators": [
            {
              "type": "expression",
              "text": "End date should be greater than start date",
              "expression": "{panel.start-date} < {panel.end-date}"
            }
          ],
          "inputType": "date",
          "visibleIf": "{panel.country} notempty"
        },
        {
          "type": "html",
          "name": "days-spent",
          "readOnly": true,
          "html": "<b>Days spent in {panel.country}</b>: {panel.diffdays}",
          "titleLocation": "left",
          "visibleIf": "{panel.country} notempty and {panel.start-date} notempty and {panel.end-date} notempty and {panel.start-date} < {panel.end-date}"
        },
        {
          "type": "expression",
          "name": "diffdays",
          "expression": "iif({panel.start-date} < {panel.end-date}, diffDays({panel.start-date}, {panel.end-date}), 0)",
          "visible": false
        }
      ]
    }
  ]
};
```

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