I have an array of products like this
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"
}
];
What I want is to loop through the array and get the category displayed only once, I know each drink can have the same category, but I want it displayed only once, and also get the drinkName display under each category.
Example:
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>
});
For example, I have a let's say two drinkName with the category "Juice", if I try to map through the products and want to get the product?.category, I will have Juice printed twice, so I want it to get printed once, if it exists twice print only once -- I hope you understand
Is that possible?
Like @Bravo says:
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>
);
});
};