0

Necesito que en cada contendor tenga el nombre de dos productos, es decir recorrer el map de dos en dos pero no sabría hacerlo con un map y no encuentro la forma de poder usar for en nextjs.

    productos.map((productos) =>

            <div>
              {productos.name}
              {productos.name}

            </div>

    )
2
  • ¿Porque el .map()? ¿Debes usarlo obligatoriamente? Recuerda que .map se utiliza para realizar algún tipo de operación o procesamiento sobre los elementos del array, ya que ese método devuelve otro array. Sin embargo, por lo que comentas, lo que quieres es recorrer y pintar (no devuelves nada realmente). ¿Es eso lo que quieres? Quizás en vez de un .map se ajuste mejor un .forEach y ahí pintar de dos en dos. ¿Podrías aclarar esto para poder responder a tu pregunta?
    – Sema
    Commented el 12 ene. 2021 a las 22:41
  • @Sema puedo usar cualquier cosa, solo vi como recorrer listas en la documentación oficial de react y salía con map por eso lo uso, lo intente con for en el return del componente pero este no se puede usar ahí, así que no estoy seguro de como se hace.
    – Cokete
    Commented el 12 ene. 2021 a las 22:50

1 respuesta 1

0

Según has comentado, no sería necesario un .map, por lo que te dejo dos implementaciones que podrían hacer funcionar según el resultado esperado. He utilizado un console.log para que se pueda ver el resultado por cualquier otro usuario que tenga una duda parecida y entienda el comportamiento. Cualquier duda puedes utilizar los comentarios.

const productos = [
  { name: 'ProdA' },
  { name: 'ProdB' },
  { name: 'ProdC' },
  { name: 'ProdD' },
  { name: 'ProdE' },
  { name: 'ProdF' }
];

// Utilizando forEach
productos.forEach((prod, index) => {
  if(index % 2 === 0) {
    console.log(`1) DIV => ${productos[index].name} - ${productos[index + 1].name}`);
  }
});

// Utilizando un for "clásico"
for(let i=0; i<productos.length; i+=2) {
  console.log(`2) DIV => ${productos[i].name} - ${productos[i + 1].name}`);
}

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.