Skip to main content
se añadieron 385 caracteres en el cuerpo
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

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;
        }
      })}
    </>
  );

Por si sirve de algo, una forma de solucionarlo sería lo siguien.

Tomando un array básico de ejemplo

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;
        }
      })}
    </>
  );

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;
        }
      })}
    </>
  );
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

Por si sirve de algo, una forma de solucionarlo sería lo siguien.

Tomando un array básico de ejemplo

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;
        }
      })}
    </>
  );