<For>
Edit this pageThe <For>
component is used to render a list of items. It is similar to the .map()
function in JavaScript.
A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument:
The each
prop can also be a function that returns a list. This is useful for creating a loop that depends on a state value:
The optional second argument is an index signal:
Props
Name | Type | Description |
---|---|---|
each | readonly T[] | The list of items to render. |
fallback | JSX.Element | A fallback element to render while the list is loading. |
children | (item: T, index: () => number) => U | A callback that returns a JSX element for each item in the list. |