Skip to main content

Looping

EDL provides the :forEach prop for rendering lists and iterating over collections / arrays.

Basic Usage​

Use :forEach to render a list of items:

<Fragment :forEach={items} :as="item">
  <Text>{item.name}</Text>
</Fragment>

With Index​

Access the current index in the loop using the variable name of your :as alias suffixed with "Index":

<Fragment :forEach={items} :as="item">
  <Text>#{itemIndex + 1}: {item.name}</Text>
</Fragment>

For example:

  • :as="item" → itemIndex
  • :as="product" → productIndex
  • :as="user" → userIndex

Nested Lists​

You can nest :forEach loops:

<Fragment :forEach={categories} :as="category">
  <Text fontWeight="bold">{category.name}</Text>
  <Fragment :forEach={category.items} :as="item">
    <Text>  - {item.name}</Text>
  </Fragment>
</Fragment>

With Conditional Rendering​

Combine with :if for filtered lists:

<Fragment :forEach={items} :as="item">
  <Text :if={item.isActive}>
    {item.name}
  </Text>
</Fragment>

Best Practices​

  • Always provide a unique :as alias for the current item
  • Use meaningful names for your aliases
  • Consider extracting complex nested loops into separate components
  • Use Fragment to wrap multiple elements in a loop