Por si sirve de algo, una forma de solucionarlo sería lo siguiende la siguiente forma.
de primero utilizamos una variable que tendrá los 4 elementos a mostrar en el div
, que en este caso son elementos String
let elements = '';
lo siguiente sería saber cuando son 4 elementos, por lo que usamos el index del recorrido que realiza el map
para la siguiente formula que nos regresa un residuo
(i+1) % 4 === 0
Tomando un array
básico de ejemplo quedaría todo de esta forma
const data = [
'element1',
'element2',
'element3',
'element4',
'element5',
'element6',
'element7',
'element8',
'element9',
]
let elements = '';
return (
<>
{data.map((e,i) =>{
elements += e+' '
if( (i+1) % 4 === 0){
const div = <div key={e} >nuevo div {elements}</div>
elements = '';
return div;
}
})}
</>
);