ClientApp/src/components/RankingGrid.js

const RankingGrid = ({ items = [], imgArr, drag, allowDrop, drop }) => {
    const rankingGrid = [];
    const cellCollectionTop = [];
    const cellCollectionMiddle = [];
    const cellCollectionBottom = [];
    const cellCollectionWorst = [];

    function pushCellMarkupToArr(cellCollection, rankNum, rowLabel) {
        if (rankNum > 0) {
            const item = Array.isArray(items) ? items.find(o => o.ranking === rankNum) : null;
            cellCollection.push(
                <div key={`rank-cell-${rankNum}`} id={`rank-${rankNum}`} onDrop={drop} onDragOver={allowDrop} className="rank-cell">
                    {item ? (
                        <img 
                            key={`img-${item.id}-${rankNum}`}
                            id={`item-${item.id}`} 
                            src={item.image_path && item.image_path.startsWith('http') ? item.image_path : `/api/item/uploads/${item.image_path}`}
                            draggable="true" 
                            onDragStart={drag}
                            alt={item.title}
                        />
                    ) : null}
                </div>
            );
        } else {
            cellCollection.push(
                <div key={`label-${rowLabel}`} className="row-label">
                    <h4>{rowLabel}</h4>
                </div>
            );
        }
    }

    function createCellsForRow(rowNum) {
        var rankNum = 0;
        var currCollection = [];
        var label = "";
        const numCells = 5;

        for (var a = 1; a <= numCells; a++) {
            rankNum = (a === 1) ? 0 : (numCells * (rowNum - 1)) + a - rowNum;

            if (rowNum === 1) {
                currCollection = cellCollectionTop;
                label = "Top Tier";
            }
            else if (rowNum === 2) {
                currCollection = cellCollectionMiddle;
                label = "Middle Tier";
            }
            else if (rowNum === 3) {
                currCollection = cellCollectionBottom;
                label = "Bottom Tier";
            }
            else if (rowNum === 4) {
                currCollection = cellCollectionWorst;
                label = "Worst Tier";
            }
            pushCellMarkupToArr(currCollection, rankNum, label);
        }
    }

    function createCellsForRows() {
        const maxRows = 4;
        for (var row = 1; row <= maxRows; row++) {
            createCellsForRow(row);
        }
    }

    function createRowsForGrid() {
        rankingGrid.push(<div key="row-top" className="rank-row top-tier">{cellCollectionTop}</div>);
        rankingGrid.push(<div key="row-middle" className="rank-row middle-tier">{cellCollectionMiddle}</div>);
        rankingGrid.push(<div key="row-bottom" className="rank-row bottom-tier">{cellCollectionBottom}</div>);
        rankingGrid.push(<div key="row-worst" className="rank-row worst-tier">{cellCollectionWorst}</div>);
        return rankingGrid;
    }

    function createRankingGrid() {
        createCellsForRows();
        return createRowsForGrid();
    }

    return (
        <div className="rankings">
            {createRankingGrid()}
        </div>
    )
}

export default RankingGrid;