For

The For component can iterate over arrays and render JSX for each available item. Keys are automatically assigned.

Import

import { For } from 'react-haiku';

Usage

0: React1: Haiku

import { For } from 'react-haiku';

export const Component = () => {
    const data = [{name: 'React'}, {name: 'Haiku'}];

    return(
        <For each={data} render={(item, index) => 
            <b>{`${index}: ${item.name}`}</b>
        }/>
    );
}

API

The component accepts the following props:

• each - the array to iterate over when rendering
• render - the render method that can return JSX