For

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

Import

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

Copied!

Usage

Editable example

const items = useMemo(
  () => [
    { name: "孫悟空", powers: ["かめはめ波", "元気玉"] },
    { name: "ベジータ", powers: ["ギャリック砲", "ビッグバンアタック"] },
    { name: "ピッコロ", powers: ["魔貫光殺砲", "再生能力"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items}>
      {({ name, powers }, index) => (
        <Card key={index} size="md" variant="outline">
          <CardHeader>
            <Text as="h1" fontSize="lg">
              {name}
            </Text>
          </CardHeader>

          <CardBody pt="sm">
            <Text color="muted">Powers: {powers.join(", ")}</Text>
          </CardBody>
        </Card>
      )}
    </For>
  </VStack>
)

Copied!

Fallback

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

Editable example

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

Copied!

Edit this page on GitHub

PreviousCloseButton NextEmptyState