Mapping / Looping inside dumb component in React

I create a dumb component that used by so many data, but same display.

The problem is, is it better dumb component to accept only native data type or array of object? since my data property is difference each table.

<ScrollView>
{listOfData.map(()=>(
<Dumb title={data.title} description={data.description} >
))}
</ScrollView>


pros: No object properties dependancy

cons: Need Loop in smart component which make it messy
vs

<ScrollView>
<Dumbs data={listOfData} >
</ScrollView>


pros: More simple in smart component

cons: The dumb component only accept specific data properties

So which one better? I do use a second one and mapping it in my component.ts first to change object properties, but it make component.ts messy

2 Answers
2

I think the nicest way would be:

<ScrollView>
{listOfData.map((data) => (
<Dumb key={data.id} {...data} />
))}
</ScrollView>


**data.id must be anything unique for each item.

I prefer the first method as it makes the component more reusable in case if your listOfData has different structure for some other data-source then you would need to check and extract the title and description for different data structure.

listOfData

data-source

<ScrollView>
{listOfData.map((data) => (
<Dumb key={data.id} description={data.desc} title={data.title} />
))}
</ScrollView>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.