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>

Contact us

Perumahan Griya Pratama Asri 2 No.H-12, Somoragen, Joho, Kec. Prambanan, Kabupaten Klaten, Jawa Tengah 57454
Find Me
iconiconiconiconhttps://www.buymeacoffee.com/outyourimpossible
2024-PRESENT © Muh Syahendra A