If you store some x-data variable as an array, you can loop through it and render a template multiple times using x-for, like this:

<ul x-data="shop">
  <template x-for='(item, index) in cart'>
    <li>
      <p x-text='item.title'></p>
      <p x-text='formatAsPrice(item.price)'></p>
      <button @click=`removeFromCart(index)`>
        Remove
      </button>
    </li>
  </template>
</ul>

The caveat is that x-for must be put on a <template> tag, and this must have a single child element (for example, wrap all tags in a div if you have more).

The <template> tag is a special tag used to hold content that’s not rendered immediately on the page, but rendered using JavaScript (see MDN).

Lessons in this unit: