Loop Rendering

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

​

Configure

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

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

​

Use Cases

• 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: