title: How to list items from object array by category and only render components based on which category was last iterated
body: <p>I have made a simple webshop that I am now converting to ReactJS.  There is an array of objects that fetch the products and they need to be listed by category(maximum of 3). Basically it has to go through the array and output a different section for every category(each section has its own image which I'm handling with CSS). </p>
  
  <p>Then within the sections it has to show the 3 products sitting inside of that category in a col-4 bootstrap layout. The biggest issue I'm facing now is that it's showing all of the products. The idea is that while the product array is being iterated, it should keep track of the last category and the current category. </p>
  
  <p>If the last iterated category is different from the current/next category, then it should render a new section element/area. Otherwise it should just place another item as a col-4 in the right place.
  I want to end up with four different sections containing each 3 products from that specific category.</p>
  
  <p>At the moment the product array is being mapped through with <code>map()</code>. It is displaying all of the products but for some reason the conditional logic I have set seems to not be working. Also it's rendering the items more than they should. So I figure that I have made some mistakes with my iterations somewhere but not sure where or what to do now.</p>
  
  <pre><code>export default class ProductTable extends React.Component {
      render() {    
  
    let lastCategory = null;
  
    const content = productItems.map((product) =&gt; (
  
      &lt;div className="col-4"&gt;
                   &lt;div className="item-wrap"&gt;
                       &lt;div className="home-prod-img-wrap"&gt;
                           &lt;img src={product.img} alt="product image" className="home-prod-img" /&gt;
                       &lt;/div&gt;
  
           &lt;div className="home-prod-title"&gt;
               &lt;h1&gt;{product.title}&lt;/h1&gt;
                   &lt;div className="caption"&gt;
                       &lt;p&gt;{product.info}&lt;/p&gt;
                   &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div className="home-prod-buttons"&gt;
               &lt;div className="read-more"&gt;
                &lt;a href="sub.html" className="read-more--link"&gt;discover&lt;/a&gt;
               &lt;/div&gt;
                   &lt;div className="add-to-cart"&gt;
                       &lt;a href="#" className="add-to-cart--link"&gt;&lt;i className="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;
                   &lt;/div&gt;
           &lt;/div&gt;
                   &lt;/div&gt;
           &lt;/div&gt;
   ));
  
  
  
    // first get the data
    console.log(productCats)
    const section = productItems.map((product) =&gt; (
  
      &lt;section key={product.id} className={"product " + (product.category === "honest skin creme" ? "first" :
      product.category === "best of organic products" ? "second" :
      product.category === "sprays and cremes" ? "third" :
      product.category === "best uv protection" ? "fourth" : "")}&gt;
  
      &lt;div className="main-title"&gt;
                  &lt;h1&gt;{product.category}&lt;/h1&gt;
      &lt;/div&gt;
  
          &lt;div className="container product-container"&gt;
              &lt;div className="row"&gt;
  
                  {content}
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
    ));
  
       return  productItems.map((product) =&gt; {
  
              if (lastCategory !== product.category) {
  
                  return (
                      /* go through the products array, and if the next category is not equal to the last one then render 
                      the section part otherwise just add the content part to the mix */
  
                        &lt;div&gt;
                          {section} 
                        &lt;/div&gt;  
  
                  )
              }
                  return (
                      &lt;div className="container product-container"&gt;
                          &lt;div className="row"&gt;
                              {content}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  );
  
          });         
      }
  
  }
  </code></pre>
  
  <p>And the data array: </p>
  
  <pre><code>export const productItems = [
  
  
      {
      "id": 1,
      "category": "honest skin creme",
      "title": "Smooth Cellulite Cream",
      "img": "https://images.unsplash.com/photo-1562887245-9d941e87344e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80",
      "price": 199,
      "company": "Honest Skin creme",
      "info":
      "this is a creme that you absolutely need in your collection... if you need to have a smooth skin. The only creme you need if you want to stay young. works for rashes but also to look way younger. like 19 if you are actually 62..",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 2,
      "category": "honest skin creme",
      "title": "Best Beauty Skin Creme",
      "img": "https://images.pexels.com/photos/279480/pexels-photo-279480.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 249,
      "company": "Honest Skin creme",
      "info":
      "this product makes your skin silky smooth. try it out... known for its silkness this product is the best thing for any dry part of the body. the skin is a very important part of the body and should be treated with the utmost care and respect.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 3,
      "category": "honest skin creme",
      "title": "Honest Hand Creme",
      "img": "https://images.pexels.com/photos/1029896/pexels-photo-1029896.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 649,
      "company": "Honest Skin creme",
      "info":
      "keep your hands smooth and soft, take good care of the skin... everybody knows that we should always take good care of the skin. skincare is as important as coffee in the morning. thats why you should buy this product now",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 4,
      "category": "best of organic products",
      "title": "Organic Leaves",
      "img": "https://images.pexels.com/photos/2473990/pexels-photo-2473990.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500",
      "price": 49.00,
      "company": "Organic Leaves Ltd.",
      "info":
      "use the juice in this organic leaf to appear much younger... and feel revitalized. Forever young with our organic leaves. And you can eat them too. Monkeys also like to eat our leaves.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 5,
      "category": "best of organic products",
      "title": "Aloe Vera Skin Protector",
      "img": "https://images.pexels.com/photos/1634502/pexels-photo-1634502.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 49.00,
      "company": "Organic Leaves Ltd.",
      "info":
      "protect your precious skin with Aloe Vera Protector... and never have itchy skin again. This is the product most purchased by people with skin conditions that cause rashes and itches.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 6,
      "category": "best of organic products",
      "title": "Hemp Oil",
      "img": "https://images.pexels.com/photos/2565761/pexels-photo-2565761.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 147.20,
      "company": "Organic Leaves Ltd.",
      "info":
      "Hemp Oil is proven to be great for the skin and your health... Hemp oil has been around since a while and for a long time civilations have successfully profited from its healing powers. this is happening more and more as well in our societies",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
  
      { 
      "id": 7,
      "category": "sprays and cremes",
      "title": "Everything for the skin",
      "img": "https://images.pexels.com/photos/264870/pexels-photo-264870.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 99.40,
      "company": "Skin Products Ltd.",
      "info":
      "skin pleasure comes in our colored bottles of magic... They contain a lot of healthy organic ingredients from all over the world. Don't be a stranger and purchase some of our bottles.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 8,
      "category": "sprays and cremes",
      "title": "Exotic Blue",
      "img": "https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 19.99,
      "company": "Skin Products Ltd.",
      "info":
      "the No 1 item for your skin collection. get it now... Receive a special promo code when purchasing this item. dont forget to sign up for our weekly newsletter.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 9,
      "category": "sprays and cremes",
      "title": "Purple Skin Powder",
      "img": "https://images.pexels.com/photos/1927612/pexels-photo-1927612.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=750&amp;w=1260",
      "price": 79.99,
      "company": "Skin Products Ltd.",
      "info":
      "skin powder that keeps your skin tight and young... That's what you need. Don't listen to the competition. We are the real deal. Purchase now and don't think twice. When it comes to your skin, we know best.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
  
      {
      "id": 10,
      "category": "best uv protection",
      "title": "Facial UV cream",
      "img": "https://images.pexels.com/photos/2442898/pexels-photo-2442898.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 59.99,
      "company": "Best UV",
      "info":
      "rub it on your skin and be 100% protected from damaging UV... when outside enjoying those summerdays. It is very important to keep from getting sunburn as the results can be quite severe. Prevent this by applying our cream every 2 hours.",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 11,
      "category": "best uv protection",
      "title": "Smooth Skin Spray",
      "img": "https://images.pexels.com/photos/965992/pexels-photo-965992.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940",
      "price": 39.99,
      "company": "Best UV",
      "info":
      "spray this on your skin and feel ultimate bliss. it's that good... you can take our word for it. We have a special promo at the moment just use our code: SILKY4EVER123",
      "inCart": false,
      "count": 0,
      "total": 0
      },
  
      {
      "id": 12,
      "category": "best uv protection",
      "title": "Honest Beauty Package",
      "img": "https://images.unsplash.com/photo-1562887189-4b6edf71d847?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80",
      "price": 499.99,
      "company": "Best UV",
      "info":
      "get this promo package now and profit from a massive discount... it's almost sold out so don't wait. Great as a gift for mothers day or valentines day or just a nice surprise for that loved one.",
      "inCart": false,
      "count": 0,
      "total": 0
      }
  
  ];
  </code></pre>