When you need to display a list or collection of items in your interface, Alpine.js provides the x-for directive. This directive allows you to loop over arrays or collections in your component state and render a template for each item. The basic syntax is x-for="item in items", where items is an array in your Alpine.js state and item is the variable representing each element as you loop.

You can also access the current index by writing x-for="(item, index) in items". This is useful for numbering, unique keys, or other index-based logic. To help Alpine.js track each item efficiently when the list changes, you should always provide a unique key using the :key binding. The key should be a unique value for each item—such as an ID or, as a fallback for demonstration, the index.

When using x-for, always wrap the repeated template in a <template> tag to avoid invalid HTML. Place the x-for directive directly on the <template>, and Alpine.js will render its contents for each item in the array. This pattern makes it easy to build dynamic lists, menus, tables, and more.

For best results:

• Always provide a unique key with :key for each item;
• Avoid using the array index as a key unless you have no unique identifier;
• Keep your templates simple and focused on display logic;
• Manage your array state in x-data to ensure updates are reactive.

By following these best practices, your Alpine.js components will render dynamic lists efficiently and predictably, even as the data changes.