0

lo que quiero lograr es imprimir filas con 3 elementos columna

<div className="fila">
      <div className="columna"/>
      <div className="columna"/>
      <div className="columna"/>
 </div>

obtengo el arreglo Inmue que contiene todas las columnas y recorro sus elementos

 {Inmue.map((inm, i) => {
       return <div datos={inm} className="columna"/>
      })}

entonces el problema es que si agrego el elemento fila este se añade cada vez que recorro una columna , y lo que quiero es que una fila contenga 3 columnas

intente esto pero marca error al no cerrar un div

if((i+1)% 3 ==0)
      return (</div>
        <div className="flex flex-row pb-6">)

okey no estoy casado con map cualquier sugerencia de como hacerlo es bien recibida

al final quedo asi


{Inmue &&
        [...Array(Math.ceil(Inmue.length / 3))].map((fila, i) => {
          return (
            <div className="flex flex-row pb-6" key={i}>
              {Inmue.slice(i * 3, i * 3 + 3).map((columna, j) => {
                return <div key={j}>{j}</div>;
              })}
            </div>
          );
        })}

1 respuesta 1

1

Intenta esto:

          [...Array(Math.ceil(randArray.length / 3))].map((fila, f) => {
            return (
              <div key=f{f} className='fila'>
                {
                  Inmue.slice(f*3,f*3+3).map((col,c) => {
                    return <div key=c{c} datos={col} className='columna'></div>
                  })
                }
              </div>
            )
          })
2
  • pues muchas gracias amigo si funciono , solo me quedo duda por que al llamar a slice de (0,3) , me regresa 3 elementos en vez de 4
    – chidoman
    Commented el 16 mar. 2021 a las 15:29
  • array.slice(start,end) regresa los elementos desde start hasta end pero sin incluir el ultimo.. es decir,, [start,end} Commented el 16 mar. 2021 a las 19:55

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.