JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

CSS

div.product {
    margin: 5px;
    border: 1px solid #000;
    padding: 5px;
}

JavaScript

var data = [
        {
            name: 'product1',
            price: '40',
            promotion: [
                {
                    name: 'Buy 3 get 30% off',
                    code: 'ewq123'
                },
                {
                    name: 'Free Gift',
                    code: 'abc140'
                }
            ]
        },
        {
            name: 'product2',
            price: '40',
            promotion: [
                {
                    name: 'Buy 3 get 30% off',
                    code: 'ewq123'
                }
            ]
        },
        {
            name: 'product3',
            price: '40',
            promotion: [
                {
                    name: 'Buy 3 get 30% off',
                    code: 'ewq123'
                }
            ]
        },
        {
            name: 'product4',
            price: '40'
        },
        {
            name: 'product5',
            price: '40',
            promotion: [
                {name: '30% off', code: 'fnj245'}
            ]
        },
        {
            name: 'product6',
            price: '0',
            promotion: [
                {
                    name: 'Free Gift',
                    code: 'abc140'
                }
            ]
        }
    ];

    Array.prototype.groupBy = function (property, grouping, transformer) {

        var values = [];

        this.forEach(function (item) {

            grouping.call(this, item, property).forEach(function (item) {

                if (!values.contains(property, item[property])) {
                    values.push(item);
                }

            });

        });

        return transformer.call(this, values);

    };

    Array.prototype.contains = function (key, value) {
        return this.find(function (elm) {
            return elm[key] === value;
        });
    };

    function transformerFunction(values) {

        this.forEach(function (item) {

            if (!item.promotion)...