List rendering

List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection.

<For>

<For> is a looping component that allows you to render elements based on the contents of an array or object.

The sole property in <For> is each, through which you specify the data collection to loop over. This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as Object.entries or Object.values.

import { For } from "solid-js"

<For each={data()}>
  {(item, i) =>
    // rendering logic for each element
    // item() and i() are accessors — call them to get the value
  }
</For>

Between the <For> tags, the component requires a callback function which will dictate how each item in the data collection should be rendered.

The function receives two arguments, both of which are accessors (functions that return the current value):

• item: an accessor for the current item — call item() to get the value.
• i: an accessor for the current index — call i() to get the value.

<For each={data()}>
  {(item, i) => (
    <li
      style={{
        color: i() % 2 === 0 ? "red" : "blue"
      }}
    >
      {item().name}
    </li>
  )}
</For>

Keyed rendering (default)

By default, <For> uses keyed rendering (by identity). When the list changes, items are matched by object identity, and the DOM node is moved if an item shifts position. The item accessor updates in place.

<For each={todos()}>
  {(todo, i) => <TodoRow todo={todo()} index={i()} />}
</For>

Non-keyed rendering (keyed={false})

When the order and length of the list remain stable but the content may change frequently, non-keyed rendering avoids recreating DOM nodes. This replaces the removed Index component from Solid 1.x:

<For each={data()} keyed={false}>
  {(item, i) => (
    <li>{item().name}</li>
  )}
</For>

Custom key function

You can provide a custom key function to control how items are matched across re-renders:

<For each={todos()} keyed={(t) => t.id}>
  {(todo) => <TodoRow todo={todo()} />}
</For>

Fallback

A fallback prop can display content when the list is empty:

<For each={todos()} fallback={<EmptyState />}>
  {(todo) => <TodoRow todo={todo()} />}
</For>

<Repeat>

<Repeat> renders based on a count (and optional from), without requiring a data array:

import { Repeat } from "solid-js"

// 10 items: 0..9
<Repeat count={10}>{(i) => <Item index={i} />}</Repeat>

// Windowing / offset
<Repeat count={visibleCount()} from={start()}>
  {(i) => <Row index={i} />}
</Repeat>

// Fallback when count is 0
<Repeat count={items.length} fallback={<EmptyState />}>
  {(i) => <div>{items[i]}</div>}
</Repeat>

When to use <For> vs <Repeat>

• Use <For> when rendering from a data array where items have identity and may change, reorder, or be filtered.
• Use <Repeat> when rendering a fixed count of items (skeletons, ranges, grids) where no list diffing is needed.