Render Products Grouped By Category

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'] listOfItem

Solution 1:

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

render() {
  // in case "listOfCategories" is not predefinedlet 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
        <Categorykey={cat}name={cat} {...catProps}>
          {listOfItems.filter(item => item.fields.category === cat).map(item => (
            <Productkey={item.fields.id}id={item.fields.id}name={item.fields.name}
              {...itemProps}
            />
          ))}
        </Category>
      ))}
    </div>
  );
}

Solution 2:

Basic

<div>
  Basic
    {this.props.listOfItems.filter(item => item.fields.category ==="Basic").map(item => (
        <Productid={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 => (
        <Productid={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>