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	optional boolean	Place a comma between each element
doubleHardline	optional boolean	Place two hardlines between each element
each	T	The array to iterate over.
ender	optional Children	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	optional boolean	Place the join punctuation at the end, without a line break. The punctuation is emitted unconditionally in flat and broken modes. To add trailing punctuation only in broken mode, use ender with <ifBreak> inside a <group> with a non-hardline joiner (e.g. line): <group> <List comma line ender={<ifBreak>,</ifBreak>}>...</List> </group>
hardline	optional boolean	Place a hardline (<hbr />) between each element
joiner	optional Children	Text to place between each element
line	optional boolean	Place a regular line (<br />) between each element
literalline	optional boolean	Place a literal line (<lbr />) between each element
semicolon	optional boolean	Place a semicolon between each element
skipFalsy	optional boolean	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	optional boolean	Place a softline (<sbr />) between each element
space	optional boolean	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.