Tengo una variedad de objetos como:
{"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},tengo una lista plana
<FlatList data={products} ... renderItem={({item, i }) => { return <SingleItem key={item.code} } product={item} /> }} /> Representé la lista con FlatList y quiero aplicar un estilo a un <SingleIem> si 2 elementos adyacentes tienen grupos diferentes.
p.ej
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 4y así.
¿Cómo puedo conseguir esto?
Si ya tiene una matriz de objetos a mano y un índice, eso significa que puede comparar el índice actual con el último índice y verificar si la propiedad del grupo es la misma para ambos. Coloque dentro de la función renderItem y asigne clases en consecuencia
renderItem={ (item, i) => { const isSameCategrory = arr[i]?.group === arr[i-1]?.group; // rest of code goes here } }Puedes comparar la propiedad del group usando el argumento i
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> ) }}