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!
Advertisement
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> )