List
Maps an array to nodes. Renders nothing when the array is empty, so no empty-check wraps the JSX.
API
Props
| prop | type | default | |
|---|---|---|---|
array? | readonly T[] | [] | the source rows |
itemExtractor? | (({ row, index }) => ReactNode) | null | null | called per row |
Examples
Usage
The extractor receives an object rather than positional arguments, so the call site says what it uses: { row } when the index is irrelevant, { row, index } when it is not. The generic flows from the array, so row is typed without any annotation.
<List array={jobs} itemExtractor={({ row, index }) => <Job key={index} job={row} />} />Details
Keys are yours
List does not add keys. It returns exactly what the extractor produced, so React sees your nodes and warns about your keys — which is what you want, because only the call site knows what identifies a row.
<List array={jobs} itemExtractor={({ row }) => <Job key={row.id} job={row} />} />Reach for the index only when the rows have no identity of their own and the array never reorders; anything stateful in the row will otherwise follow the position instead of the data.
A readonly array
The array is typed readonly T[], so a tuple declared with as const — a nav, a set of tabs, anything hardcoded — goes in without a cast, and List advertises that it never mutates what it is given.
Empty renders nothing
An empty array renders nothing, and so does a missing extractor. That is the point of the primitive: the empty check that usually wraps a .map in JSX moves inside, and the call site stops having two shapes.