Best way to create new div based on a specified length of elements?

Sorry if the question doesn’t make sense, mainly because it’s hard to explain what I’m trying to accomplish so I will try my best to make you understand.

I have an inventory system that when receiving items by scanning their serial numbers, my application lists the serial numbers that were scanned as they come in. What I would like to accomplish ideally is that say after every 3 serial numbers that are scanned my application should create a new div and essentially start a new line of scanned serial numbers, if that makes sense.

Here is a picture of what I would like to accomplish.

Right now I just have it working where as a serial number is scanned in, it goes accross the screen and they just keep adding to the right of that serial number.

Here is a snippet of my RecieveItems.js

RenderScannedItems(){
        var scannedItems = this.state.ScannedItems;
        var serials = [];

        for(var i = 0; i < scannedItems.length; i++){
            
            var serial = (
                    <div style={{margin: '2%'}}>
                        {scannedItems[i]} |
                    </div>
            )

            serials.push(serial);
        }

        return serials;
    }

   render(){
    return(
     <div className="ScannedSerials" id="ScannedSerials">
         {this.RenderScannedItems()}
     </div>
    );
   }

My initial thought was that I create an if statement that checked if the length of the scannedItems % 3 was equal to zero and then create a new div, but it didn’t work they way that I thought it would.

If anyone has any ideas on how I could accomplish this, that would be much appreciated. Thanks!

Answer

Make another var “serial group”. Make another counter j=1 outside of your loop. In the loop add serial to serial group, then if j is 3 push your div of serials onto serials and reset j to 1. All this said, you’re better off using CSS to accomplish this formatting … here’s a css example: Outside of loop:

const serialdivstyle = {
  display:'inline-block',
  width: '28%',
  margin: '2%',
  border-left: '1px solid black',
  text-align: 'center'
};

Inside of loop (note the bar character deletion):

var serial = (
<div style={serialdivstyle}>
{scannedItems[i]} 
</div>
)