`<For />`

Syntax: <For each={array}>{(item, index) => Block}</For>
Example: <For each={[1, 2, 3]}>{(item) => myBlock({ item })}</For>

The <For /> component is used to render a list of blocks. It takes an array as the each prop and a function as its children. The function is called for each item in the array and is passed the item and its index as arguments.

It's the best way to loop over an array. As the array changes, <For /> updates or moves items in the DOM rather than recreating them. Let's look at an example:

import { createRoot } from 'react-dom/client';
import { block, For } from 'million/react';
 
function Display() {
  return <div>{this.props.item}</div>;
}
 
const DisplayBlock = block(Display);
 
function App() {
  const [items, setItems] = useState([1, 2, 3]);
 
  return (
    <div>
      <button onClick={() => setItems([...items, items.length + 1])}>
        Add item
      </button>
      <For each={items}>{(item) => <DisplayBlock item={item} />}</For>
    </div>
  );
}
 
createRoot(document.getElementById('root')).render(<App />);

Block Components Usage Inside Next.js