I'm getting my data from database. Then I would like them to be categorized by "item_category" and have them in react-bootstrap accordion.
So far I have this:
<Accordion>
{
items.map((item, index) => {
if(item.item_category === "Submachines"){
return (
<Accordion.Item eventKey={index} key={index}>
<Accordion.Header>{item.item_category}</Accordion.Header>
<Accordion.Body>
<Item key={index}
itemName={item.item_name}
itemImageUrl={item.item_image}
itemCategory={item.item_category}
sellPrice={item.sell_price}
buyPrice={item.buy_price}
slotSize={item.slot_size}
/>
</Accordion.Body>
</Accordion.Item>
);
}
})
}
</Accordion>
But It's kind of wrong as this is creating an accordion item for each item in items array. What I would like to have is for each category to have only one accordion item.
Can someone point me in right direction, please ? Thanks
You can either get items from backend already grouped by category or you can ask for category while iterating over your items, save them grouped by category and only then render Accordion.Item for each category:
Example categories object:
const categories = {
"catA": [ item1, item2, item3],
"catB": [ item4, item5, item6],
"catC": [ item7, item8, item9]
}
Edit:
Please look into following codesandbox: https://codesandbox.io/s/charming-mirzakhani-9n344i
const categories = {};
for (const item of items) {
if (item.item_category in categories) {
categories[item.item_category].push(item);
} else {
categories[item.item_category] = [item];
}
}
return (
<Accordion>
{Object.entries(categories).map((entry) => {
const category = entry[0];
const itemList = entry[1];
return (
<Accordion.Item eventKey={category} key={category}>
<Accordion.Header>{category}</Accordion.Header>
<Accordion.Body>
{itemList.map((item) => (
<span>{item.name} </span>
))}
</Accordion.Body>
</Accordion.Item>
);
})}
</Accordion>
);
A cleaner way to achieve this, first you need get grouped category from items and then create Accroding.Item for each category like this:
const categorySet = new Set();
items.map((item) => categorySet.add(item.item_category));
const categoryArray = [...categorySet]
categoryArray.map(category => <According.Item .... rest of the component code