Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

For

Used to loop over an array and render a component for each item.

SourceStorybook
One
Two
Three

Usage

The For component is used to render a list of items in a strongly typed manner. It is similar to the .map().

import { For } from "@chakra-ui/react"
<For each={[]} fallback={...} />

Examples

Object

Here's an example of using the For component to loop over an object.

Naruto

Powers: Shadow Clone, Rasengan

Sasuke

Powers: Chidori, Sharingan

Sakura

Powers: Healing, Super Strength

Fallback

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

No items to show

Props

PropDefaultType
each
T[] | readonly T[] | undefined

The array to iterate over

fallback
React.ReactNode

The fallback content to render when the array is empty

Previous

EnvironmentProvider

Next

FormatNumber