0

tengo un array que viene de una api y busco hacer que cada cuatro elementos estén en un nuevo contenedor padre, algo así:

<div>
    {/* four childs*/}
</div>
<div>
    {/* four childs*/}
</div>
<div>
    {/* four childs*/}
</div>
....

React utiliza array.map() y no se me ocurre nada de como hacer para condicionar dibujar los elementos como necesito pintarlos.

Cualquier sugerencia es bienvenida, muchas gracias

2 respuestas 2

1

Buscando encontré esta solución que me funcionó muy bien que consiste en dividir el array en varios arrays para luego iterarlos así:

const arr = Array.from({ length: 36 }, (v, i) => `${i}a`); // para simular el array de la api
let arrayOfArrays = [];

const SPLIT = 4; // Partir en arreglo de 4
for (let i = 0; i < arr.length; i += SPLIT) {
    let arrSplit = arr.slice(i, i + SPLIT);
    arrayOfArrays .push(arrSplit);
}
console.log("Arreglo de arreglos: ", arrayOfArrays );

Para montar los elementos en el DOM habría que recorrer cada uno de los arrays:

arrayOfArrays.map((el, i) => 
    <div key={i}>
        el.map((item, key) => <div key={i}>{item}</div>)
    </div>
)

Creditos a parzibyte

0

Por si sirve de algo, una forma de solucionarlo sería de 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;
        }
      })}
    </>
  );
2
  • Gracias por la sugerencia, probare a ver que tal me va
    – Andersson
    Commented el 23 abr. 2021 a las 5:45
  • 1
    @Andersson Recuerda marcar una respuesta como correcta, aun siendo tu propia respuesta, para otros usuarios sepan como solucionar problemas similares
    – Richard
    Commented el 23 abr. 2021 a las 16:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.