Add a For component

packages/components/src/For/For.tsx

@@ -0,0 +1,23 @@
+import type { AnyObject } from '@react-universal/utils';
+
+export interface ForProps<T> {
+  /**
+   * The render function to render each item in the array.
+   */
+  children: (item: Exclude<T, undefined>, index: number) => React.ReactNode;
+  /**
+   * The array to iterate overs.
+   */
+  each: T[] | readonly T[] | undefined;
+  /**
+   * The fallback content to render when the array is empty.
+   */
+  fallback?: React.ReactNode;
+}
+
+export const For = <T extends string | number | AnyObject | undefined>({
+  each,
+  fallback,
+  children,
+}: ForProps<T>): React.ReactNode =>
+  each?.length === 0 ? fallback || null : each?.map(children as any);

packages/components/src/For/index.ts

@@ -0,0 +1,2 @@
+export { For } from './For';
+export type { ForProps } from './For';

packages/components/src/Show/Show.tsx

@@ -3,15 +3,15 @@ import { isValidElement } from 'react';
 
 export interface ShowProps<T> {
   /**
-   * The children to render if `when` is `true`
+   * The children to render if `when` is `true`.
    */
   children: React.ReactNode | ((props: T) => React.ReactNode);
   /**
-   * The fallback content to render if `when` is `false`
+   * The fallback content to render if `when` is `false`.
    */
   fallback?: React.ReactNode;
   /**
-   * If `true`, it'll render the `children` prop
+   * If `true`, it'll render the `children` prop.
    */
   when: T | null | undefined;
 }

packages/components/src/index.ts

@@ -1,6 +1,7 @@
 export * from './Box';
 export * from './Button';
 export * from './Container';
+export * from './For';
 export * from './Heading';
 export * from './Image';
 export * from './Link';