Iterator

items props로 주어진 배열을 반복하면서, 각 항목에 대해 특정 요소 및 컴포넌트를 렌더링할 수 있는 컴포넌트입니다.

itemKey로 문자열을 넣으면, 각 요소에서 해당 프로퍼티 key의 값을 각 요소의 unique key로 설정합니다.

문자열/숫자 배열의 경우 itemKey를 넘기지 않아도. 자동으로 {index}_{item}형태로 지정됩니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface IteratorProps<T> {
  items: T[] | readonly T[] | undefined;
  itemKey?: T extends Record<PropertyKey, any> ? keyof T : string;
  renderItem: (item: T, index: number) => JSX.Element;
}

const Iterator: <T>({
  items,
  itemKey,
  renderItem,
}: IteratorProps<T>) => JSX.Element;

Usage

typescript

import { Iterator } from '@modern-kit/react';

interface Item {
  id: number;
  name: string;
}

const Example = () => {
  const items: Item[] = [
    { id: 1, name: 'Gromit' },
    { id: 2, name: 'Dylan' },
    { id: 3, name: 'Minjae' },
  ];

  return (
    <Iterator
      itemKey="id"
      items={items}
      renderItem={(item) => (
        <h3>
          id: {item.id}, name: {item.name}
        </h3>
      )}
    />
  );
};

Example

id: 1, name: Gromit

id: 2, name: Dylan

id: 3, name: Minjae