Solid
Advanced / JSX Component Primitives

mapArray

Reactively maps an array, reusing the previously-mapped value for unchanged items.

The callback shape follows the keying mode:

  • Default / keyed: true receives (item, index) where item is the raw row value and index is an accessor.
  • keyed: false receives (item, index) where item is an accessor and index is a stable number.
  • keyed: item => key receives accessors for both arguments.

This is the underlying helper that powers <For>. App code should use <For> directly; reach for mapArray when implementing custom list components.

  • options.keyed — true (default for primitives) compares by identity; false falls back to index-only mapping; pass a function (item) => key for stable identity by extracted key.
  • options.fallback — accessor returning a value to show when the input is empty.

Import

import { mapArray } from "solid-js";

Type signature

function mapArray<Item, MappedItem>(
  list: Accessor<Maybe<readonly Item[]>>,
  map: (value: Item, index: Accessor<number>) => MappedItem,
  options?: { keyed?: true; fallback?: Accessor<any>; name?: string }
): Accessor<MappedItem[]>;
function mapArray<Item, MappedItem>(
  list: Accessor<Maybe<readonly Item[]>>,
  map: (value: Accessor<Item>, index: number) => MappedItem,
  options: { keyed: false; fallback?: Accessor<any>; name?: string }
): Accessor<MappedItem[]>;
function mapArray<Item, MappedItem>(
  list: Accessor<Maybe<readonly Item[]>>,
  map: (value: Accessor<Item>, index: Accessor<number>) => MappedItem,
  options: {
    keyed: (item: Item) => any;
    fallback?: Accessor<any>;
    name?: string;
  }
): Accessor<MappedItem[]>;

Examples

const view = mapArray(items, (item, index) => `${index()}: ${item.label}`, {
  fallback: () => "no items",
});

Related types

Maybe

type Maybe<T> = T | void | null | undefined | false;
Last updated: 7/4/26, 6:21 PMEdit this pageReport an issue with this page