Mapping component di react

Dalam mappingan data dalam bentuk array biasanya react masih menggunakan {} untuk me-looping data dalam hal ini menjadi kurang nyaman dilihat. dan ketika saya melihat di vue me-looping data menggunakan v-for nampaknya sedikit menarik dan enak diliat di htmlnya. langsung saja codenya

before

<div>
  {data.map(item => <span>{item.name}</span>)}
</div>

import { Children } from 'react'

interface ListItemProps<T> {
  of: T[]
  render: (item: T, index: number) => React.ReactNode
}

export default function ListItem<T>({ of, render }: ListItemProps<T>) {
  return Children.toArray(of.map((item, index) => render(item, index)))
}

//cara pakainya
<div>
    <ListItem of={dataArray} render={(item) => (
      <span>{item.name}</span>
    )} />
</div>