Objective

This recipe demonstrates how to render one or many items part of an array.

Code example

export class HelloWorld extends WidgetBase {
    private _people = [{
        name: 'person 1'
    }, {
        name: 'person 2'
    }];

    render() {
        const people = this._people.map((person) => v('li', [person.name]));
        return v('ul', people);
    }
}

This code example above does the following:

1. Defines a _people array containing two objects
2. The render method maps over the array to create a people array containing two virtual DOM nodes
3. The people array of virtual DOM nodes is passed as a child property to the ul node