Tengo una variedad de productos como este.
products: [ { id: 1, drinkName: "Chivita", category: "Juice", description: "The best drink ever" }, { id: 1, drinkName: "5 Alive", category: "Juice", description: "The best drink ever" }, { id: 3, drinkName: "Cocacola", category: "Others", description: "The best drink ever" } ]; Lo que quiero es recorrer la matriz y mostrar la categoría solo una vez, sé que cada bebida puede tener la misma categoría, pero quiero que se muestre solo una vez, y también mostrar el nombre de la drinkName en cada categoría.
Ejemplo:
products.map((product) => { <AccordionItem key={productsSnapshot?.id}> <h2> <AccordionButton fontSize={"sm"} fontWeight={"medium"}> <Box flex="1" textAlign="left"> {product?.category} </Box> <AccordionIcon /> </AccordionButton> </h2> </AccordionItem> });Por ejemplo, tengo, digamos, dos nombres de bebidas con la categoría "Jugo", si trato de mapear los productos y quiero obtener la categoría del producto, tendré Jugo impreso dos veces, así que quiero que se imprima una vez. , si existe dos veces, imprima solo una vez, espero que lo entienda
¿Es eso posible?
Como dice @Bravo:
const products = [ { id: 1, drinkName: "Chivita", category: "Juice", description: "The best drink ever", }, { id: 1, drinkName: "5 Alive", category: "Juice", description: "The best drink ever", }, { id: 3, drinkName: "Cocacola", category: "Others", description: "The best drink ever", }, ]; const MyComponent = () => { const items = products.reduce((prev, current) => { if (!current.category in prev) { prev[current.category] = []; } prev[current.category].push(current.drinkName); return prev; }, {}); Object.keys(items).map((key) => { return ( <AccordionItem key={key}> <h2> <AccordionButton fontSize={"sm"} fontWeight={"medium"}> <Box flex="1" textAlign="left"> {key} </Box> <Box flex="1" textAlign="left"> {items[key].map((drinkName) => { return <p key={drinkName}>{drinkName}</p>; })} </Box> <AccordionIcon /> </AccordionButton> </h2> </AccordionItem> ); }); };