Render products grouped by category

Question

Good evening readers!

I'm working to a simple shopping cart single page application using react and redux!

That's the situation:

listOfCategories: ["Basic", "Hardware"]

listOfItems : [
   {
      fields: {
           category: "Basic",
           name: "Starter",
           ...
      },
      ...
   },
   {
      fields: {
           category: "Basic",
           name: "Entertainment",
           ...
      },
      ...
   },
   {
      fields: {
           category: "Hardware",
           name: "STB",
           ...
      },
      ...
   }
]

In my component, inside the render method, there is:

render() {
    return (
      <div>
        <div>
          Catalog
            {this.props.listOfItems.map(item => (
                <Product
                  id={item.fields.productexternalid}
                  name={item.fields.productname}
                  category={item.fields.SKYDE_Product_Category__c}
                  clicked={() => this.addToCart(item)}
                  costOneTime={item.fields.baseonetimefee}
                  costRecurring={item.fields.baserecurringcharge}
                  eligible={item.fields.eligible}
                  visible={item.fields.visible}
                ></Product>
              ))}
        </div>
     </div>
    );
}

The result is something like this:

I just want to render an accordion filled with the category name, items grouped by category under the accordion:

Basic --> item.category

Starte --> item.name

Entertainment --> item.name

---

Hardware --> item.category

STB --> item.name

---

.map() and .filter() function will be useful, but i don't really know how to manage this case.

Any help will be appreciated!

Answer 1

map() and filter() are definitely useful in this case.

render() {
  // in case "listOfCategories" is not predefined
  let listOfCategories = listOfItems.map(item => item.fields.category)
  // sort and remove duplicates
  listOfCategories = listOfCategories.sort().filter((v, i) => listOfCategories.indexOf(v) === i);

  return (
    <div>
      {listOfCategories.map(cat => (
        // You probably had this `Category` component around
        <Category key={cat} name={cat} {...catProps}>
          {listOfItems.filter(item => item.fields.category === cat).map(item => (
            <Product
              key={item.fields.id}
              id={item.fields.id}
              name={item.fields.name}
              {...itemProps}
            />
          ))}
        </Category>
      ))}
    </div>
  );
}

Answer 2

Basic

<div>
  Basic
    {this.props.listOfItems.filter(item => item.fields.category ==="Basic").map(item => (
        <Product
          id={item.fields.productexternalid}
          name={item.fields.productname}
          category={item.fields.SKYDE_Product_Category__c}
          clicked={() => this.addToCart(item)}
          costOneTime={item.fields.baseonetimefee}
          costRecurring={item.fields.baserecurringcharge}
          eligible={item.fields.eligible}
          visible={item.fields.visible}
        ></Product>
      ))}
</div>

Hardware

<div>
  Basic
    {this.props.listOfItems.filter(item => item.fields.category ==="Hardware").map(item => (
        <Product
          id={item.fields.productexternalid}
          name={item.fields.productname}
          category={item.fields.SKYDE_Product_Category__c}
          clicked={() => this.addToCart(item)}
          costOneTime={item.fields.baseonetimefee}
          costRecurring={item.fields.baserecurringcharge}
          eligible={item.fields.eligible}
          visible={item.fields.visible}
        ></Product>
      ))}
</div>