> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Loop Rendering

> Learn how to use YiDA's Loop Data configuration to batch-render similar components by binding array variables, and how to access loop item data.

For scenarios that require loop rendering, similar to the following approach in React, YiDA provides a **Loop Data** configuration option. By binding variables, you can easily implement loop rendering:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
function NameList() {
  const names = [{
    name: 'Jack'
  }, {
    name: 'Rose'
  }];
	return (
  	<div>
    {
      names.map((item, index) => (
        <span>{ `No.${index}: ${item.name}` }</span>
      ))
    }
    </div>
  );
}
```

## Configure

Loop data must be an array—string arrays, number arrays, and object arrays are all supported. Configure the loop through the Loop Data setting in the Premium attributes:

You can bind loop data in two ways:

* **Static Settings** — Configure the static array data to render.
* **Variable Binding** — Bind variables to retrieve loop data from global variables or remote APIs.

Once the loop is configured, components inside the loop body can access the internal structure of the loop data through the following two injected contexts:

* **this.item** — Retrieve the loop data for the current record.
* **this.index** — Retrieve the loop index for the current record (starting from 0).

For nested loop scenarios, customize the iteration variable name and index variable name to specify context injection details and avoid conflicts, as shown below:

<Tip>
  Components configured with loop data display a small loop icon in the outline tree to indicate that loop data has been set:
</Tip>

## Use Cases

The following simple example demonstrates how to display a student list using loop data.

* Create a global variable to store student information, as shown below:

* Drag a container component onto the page to bind the loop data, as shown below:

* Place two text components in the container to bind the student name (name) and student age (age), as shown below:

* Click the Preview button in the upper right corner to see the loop rendering result, as shown below:

* Note that each student's hobby is also an array. To render it, you need nested loops. Drag another text component into the container to loop-render the hobby. (To allow the text component to access content from the outer loop at the same time, set custom iteration and index variable names on the text component.)

* Next, bind variables to the content attribute of the text component to display content from both loops, as shown below:

* Finally, click the Preview button to see the following result: