For

Forは配列をループして各アイテムに対してコンポーネントをレンダリングするために使用されるコンポーネントです。

水の呼吸, 日の呼吸

雷の呼吸

獣の呼吸

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>
)

使い方

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

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

import { For } from "@workspaces/ui"

<For />

フォールバック

配列が空または未定義の場合にフォールバックコンポーネントをレンダリングする場合は、fallbackプロパティを使用します。

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プロパティを使用します。

雷の呼吸

獣の呼吸

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プロパティを使用します。

雷の呼吸

獣の呼吸

水の呼吸, 日の呼吸

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>
)

オフセットを変更する

配列の途中の要素から開始する場合は、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を設定します。

水の呼吸, 日の呼吸

雷の呼吸

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を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	デフォルト	型 / 説明
`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.