Mapping data menggunakan component react
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>
ListItem.tsx
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)))
}
using.tsx
//cara pakainya
<div>
<ListItem of={dataArray} render={(item) => (
<span>{item.name}</span>
)} />
</div>