Iteration

There are several utilities to allow iteration of arrays and then mapping those to HTML elements.

x-each allows iteration of a list and it has been designed with server-side rendering (SSR) mind so that you can display initial data without JavaScript enabled.

x-each connects to an array and then x-template is used to mark how to render each item of it while iterating.

Each child of the template has access to the state of the current item.

Same goes for sibling items. Note how multiple templates are grouped together.

Iterated items can also have inputs while focus is retained on edit.

x-each state can be updated indirectly.

It’s possible to render lists inside lists.

x-each also works with complex objects.

x-each also works with even more complex objects.

x-each also works with state derived from x-each.