For

For is a component used to loop over an array and render a component for each item.

水の呼吸, 日の呼吸

雷の呼吸

獣の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Usage

import { For } from "@yamada-ui/react"

import { For } from "@/components/ui"

import { For } from "@workspaces/ui"

<For />

Fallback

Use the fallback prop to render a fallback component when the array is empty or undefined.

There are no items to show

<VStack>
  <For
    each={[]}
    fallback={
      <EmptyState.Root
        description="There are no items to show"
        indicator={<BoxIcon />}
      />
    }
  >
    {(item, index) => <Text key={index}>{item}</Text>}
  </For>
</VStack>

Filter

Use the filter prop to filter the array items.

雷の呼吸

獣の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} filter={({ breathing }) => breathing.length == 1}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Sort

Use the sort prop to sort the array items.

雷の呼吸

獣の呼吸

水の呼吸, 日の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} sort={(a, b) => a.breathing.length - b.breathing.length}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Change Offset

To start from a specific element in the array, set the starting position in offset.

雷の呼吸

獣の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} offset={1}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Limit Display Count

To limit the number of items displayed, set the limit.

水の呼吸, 日の呼吸

雷の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} limit={2}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Reverse Order

To reverse the order, set reverse to true.

獣の呼吸

雷の呼吸

水の呼吸, 日の呼吸

const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} reverse>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)

Props

Prop	Default	Type / Description
`children`	-	`(value: Y, index: number, array: Y[]) => ReactNode` The render function to render each item in the array.
`each`	-	`readonly Y[] \| undefined \| Y[]` The array to iterate over.
`fallback`	-	`ReactNode` The fallback content to render when the array is empty.
`filter`	-	`(value: Y, index: number, array: Y[]) => boolean` A function that returns a boolean indicating whether the item should be included in the render result.
`limit`	-	`number` The maximum number of items to include in the render result.
`offset`	`0`	`number` The number of items to skip before including them in the render result.
`reverse`	`false`	`boolean` The boolean value to determine the order of the items in the array. If `true`, the items will be reversed. If `sortBy` is provided, inversion is applied to the sorted array.
`sort`	-	`(a: Y, b: Y) => number` The function to sort the items in the array. If function is provided, the items will be sorted based on the return value. If `reverse` is `true`, the inversion is applied to the sorted array.