For

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

AI TipWant to skip the docs? Use the MCP Server

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={...} />

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

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

No items to show

Prop	Default	Type
`each`		`T[] \| readonly T[] \| undefined` The array to iterate over
`fallback`		`React.ReactNode \| undefined` The fallback content to render when the array is empty