For component implementation, to abstract data map iteration inside components

For.tsx

// For.tsx

import { Key } from "react";

type TypeWithKey<T> = T & { key: Key };

type ForProps<T> = {
  data: TypeWithKey<T>[];
  each: (x: TypeWithKey<T>, key: Key) => JSX.Element;
};

export function For<T>({ data, each }: ForProps<T>) {
  return data ? <>{data.map((item) => each(item, item.key))}</> : null;
}

// People.tsx

type Person = {
  name: string;
  age: number;
  key: Key;
};

export function People() {
  const people: Person[] = [
    { key: "p1", age: 23, name: "Daniel" },
    { key: "p2", age: 25, name: "Felipe" },
    { key: "p3", age: 30, name: "Gabriel" },
  ];

  return (
    <For
      data={people}
      each={(person, key) => <Person person={person} key={key} />}
    />
  );
}

// Person.tsx

function Person({ person }: { person: Person }) {
  return (
    <div>
      <p>{person.name}</p>
      <p>{person.age}</p>
    </div>
  );
}

Uma sugestão para tornar o componente mais performático, é utilizar o React.memo() :

import { memo } from "react"

interface Props<T> {
  data?: T[]
  render: (item: T, index: number) => JSX.Element
  fallback?: JSX.Element | null
}

function FlatMap<T>({ data, render, fallback = null }: Props<T>) {
  return data && data.length > 0 ? <>{data.map(render)}</> : fallback
}

export default memo(FlatMap)