Quiero tener una matriz, algo como esto:
let thisArray = [1,2,3,4,5,6,7,8];y quiero poder mapear la matriz en una columna/fila de 2x4.
<div className='numberRow'> <div className='numberCol'>1</div> <div className='numberCol'>2</div> </div> <div className='numberRow'> <div className='numberCol'>3</div> <div className='numberCol'>4</div> </div> <div className='numberRow'> <div className='numberCol'>5</div> <div className='numberCol'>6</div> </div> <div className='numberRow'> <div className='numberCol'>7</div> <div className='numberCol'>8</div> </div>¿Es posible usar map() y comenzar una nueva fila?
Puede usar el método Array#reduce() para crear la matriz de datos deseada, luego puede usar el método Array#map() para crear el HTML como en la siguiente demostración:
let thisArray = [1,2,3,4,5,6,7,8]; let twoCol = thisArray.reduce((acc,cur,i,a) => 2*i < a.length ? acc.concat([a.slice(2*i,2*i+2)]) : acc,[]); console.log( twoCol ); let table = twoCol.map(([c1,c2]) => `<div className='numberRow'> <div className='numberCol'>${c1}</div> <div className='numberCol'>${c2}</div> </div>`) .join(''); console.log( table );Puede dividir la matriz en partes de 2 creando una nueva matriz y usando Array.push y Array.splice , luego map cada elemento y construya el HTML:
let thisArray = [1, 2, 3, 4, 5, 6, 7, 8]; let split = [] while (thisArray.length > 0) { split.push(thisArray.splice(0, 2)); } const HTML = split.map(e => `<div className='numberRow'> <div className='numberCol'>${e[0]}</div> <div className='numberCol'>${e[1]}</div> </div>`).join('') document.write(HTML) [className=numberRow]{background-color:yellow;padding:10px}[className=numberCol]{background-color:lightgrey}