I have an array of objects like:
{"code": 123, "description": "Item 1", "group": 2},
{"code": 211, "description": "Item 2", "group": 2},
{"code": 234, "description": "Item 3", "group": 3},
{"code": 255, "description": "Item 4", "group": 4},
{"code": 311, "description": "Item 5", "group": 4},
I have a FlatList
<FlatList
data={products}
...
renderItem={({item, i }) => {
return <SingleItem key={item.code} } product={item} />
}}
/>
I rendered the list with FlatList and I want to apply a style to a <SingleIem> if 2 adjacent items have different groups.
e.g.
1) Items 1 & 2 have the same group -> no style will be applied.
2) Items 2 & 3 have different groups -> style will be applied to Item 3
3) Items 3 & 4 have different groups -> style will be applied to Item 4
and so on.
How can I achieve this?
If you already have an array of objects at hand and an index that means that you can compare the current index to the last index and check if the group property is the same for both. Place inside of the renderItem function and assign classes accordingly
renderItem={ (item, i) => {
const isSameCategrory = arr[i]?.group === arr[i-1]?.group;
// rest of code goes here
}
}
You can compare the group property using the i argument
const arr = [
{"code": 123, "description": "Item 1", "group": 2},
{"code": 211, "description": "Item 2", "group": 2},
{"code": 234, "description": "Item 3", "group": 3},
{"code": 255, "description": "Item 4", "group": 4},
{"code": 311, "description": "Item 5", "group": 4}
]
renderItem={({item, i }) => {
const isDifferentGroup = arrOfObjects[i]?.group !== arrOfObjects[i-1]?.group;
return (
<div className={isDifferentGroup ? "class-name" : undefined}>
<SingleItem key={item.code} } product={item} />
</div>
)
}}