Reactive utilities

mapArray

mapArray reactively maps an array and caches mapped items by value identity.

Import

import { mapArray } from "solid-js";

Type

function mapArray<T, U>(
  list: () => readonly T[] | undefined | null | false,
  mapFn: (value: T, index: () => number) => U,
  options?: { fallback?: () => any }
): () => U[];

Parameters

`list`

Type: () => readonly T[] | undefined | null | false
Required: Yes

Accessor that returns the source array.

`mapFn`

Type: (value: T, index: () => number) => U
Required: Yes

Mapping function for each item.

`options`

`fallback`

Type: () => any

Fallback accessor used when the source array is empty or falsy. The mapped result becomes a single fallback entry.

Return value

Type: () => U[]

Returns an accessor for the mapped array.

Behavior

Items are cached by value identity.
The index argument is an accessor.
mapFn is not a tracking scope, so reads inside the callback do not track unless they happen inside nested JSX or another reactive scope.
Reordering reuses existing mapped items for retained source values and updates their index accessors.
This is the underlying helper for <For>.

Examples

Map an array with cached items

import { createSignal, mapArray } from "solid-js";

const [source] = createSignal([
  { id: 1, status: "pending" },
  { id: 2, status: "done" },
]);

const mapped = mapArray(source, (item, index) => ({
  id: item.id,
  status: item.status,
  position: () => index(),
}));

Report an issue with this page

Contribute