For

The For component iterates over the provided array and invokes the child callback for each item. It can optionally be provided with a joiner which is placed between each item, and an ender which is placed after the last item when there is at least one item.

jsx

import { For } from "@alloy-js/core";

<For
  comma
  doubleHardline
  each={T}
  ender={Children}
  enderPunctuation
  hardline
  joiner={Children}
  line
  literalline
  semicolon
  skipFalsy
  softline
  space
>
  {children}
</For>

stc

import { For } from "@alloy-js/core/stc";

For({
  comma: boolean,
  doubleHardline: boolean,
  each: T,
  ender: Children,
  enderPunctuation: boolean,
  hardline: boolean,
  joiner: Children,
  line: boolean,
  literalline: boolean,
  semicolon: boolean,
  skipFalsy: boolean,
  softline: boolean,
  space: boolean,
}).children(children)

Props

children	(…args: […ForCallbackArgs<T>, index: number]) => U A function to call for each item.
comma	optionalboolean Place a comma between each element
doubleHardline	optionalboolean Place two hardlines between each element
each	T The array to iterate over.
ender	optionalChildren Text to place at the end of the list when there is at least one item. If set to true, the joiner is used.
enderPunctuation	optionalboolean Place the join punctuation at the end, but without a line break.
hardline	optionalboolean Place a hardline (<hbr />) between each element
joiner	optionalChildren Text to place between each element
line	optionalboolean Place a regular line (<br />) between each element
literalline	optionalboolean Place a literal line (<lbr />) between each element
semicolon	optionalboolean Place a semicolon between each element
skipFalsy	optionalboolean Whether to skip falsy values. By default, falsy values are mapped. However, when mapping children, it is useful to skip falsy values, as it enables omitting list elements via patterns like {condition && <ListItem />}.
softline	optionalboolean Place a softline (<sbr />) between each element
space	optionalboolean Place a space between each element

Remarks

When the each prop is a reactive (e.g. a reactive array, or ref to an array), For will automatically update when the array changes. When doing so, it will attempt to avoid re-rendering items which have not changed. For example, when appending an item to a reactive array, existing items will not be re-rendered. Note that presently the implementation is fairly simple - when making modifications to the middle of an array it likely that every element after the modification will be rerendered.

Example

const items = ["apple", "pear", "plum"];
return <For each={items}>
  {(item) => <>Fruit: {item}</>}
</For>

See also

• mapJoin for mapping arrays to elements outside of JSX templates.