For

<For> renders a list of elements from an array-like value and provides a fallback that is shown when the list is empty.

When you pass a signal to <For> (for example a Signal<T[]> or a computed signal), <For> subscribes to it.

Props

each^*: the array (or a signal of an array) to iterate over.
fallback: optional JSX rendered when the (unwrapped) each value is empty.
children: a render function of type (item: T) => JSX.Element that will be called for each item in the list.

Example

import { For, signal, computed } from "kiru"

function App() {
  const items = signal([0, 1, 2, 3, 4])
  const doubledItems = computed(() => items.value.map((i) => i * 2))

  const addItem = () => {
    items.value = [...items.value, items.value.length]
  }

  const clearItems = () => {
    items.value = []
  }

  return () => (
    <div>
      <button onclick={addItem}>Add item</button>
      <button onclick={clearItems}>Clear</button>

      <ul>
        <For each={doubledItems} fallback={<i>No items</i>}>
          {(item) => <li>{item}</li>}
        </For>
      </ul>
    </div>
  )
}