For
For
は配列をループして各アイテムに対してコンポーネントをレンダリングするために使用されるコンポーネントです。
インポート
import { For } from "@yamada-ui/react"
使い方
編集可能な例
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> )
フォールバック
配列が空または未定義の場合にフォールバックコンポーネントをレンダリングするには、fallback
プロパティを使用します。
編集可能な例
<For each={[]} fallback={ <EmptyState description="There are no items to show" indicator={<BoxIcon />} /> } > {(item, index) => <Text key={index}>{item}</Text>} </For>
GitHubでこのページを編集する