2

He estado probando un rato, casi una hora supongo para hacer un map que dependiendo de cada cierto número del index del array coloque un nuevo elemento:

class productos extends React.Component {
  render() {
  const arr = [
    { name: 'pollo', img: 'img.jpg', id: 1 },
    { name: 'pollo', img: 'img.jpg', id: 2 },
    { name: 'pollo', img: 'img.jpg', id: 3 },
    { name: 'pollo', img: 'img.jpg', id: 4 },
    { name: 'pollo', img: 'img.jpg', id: 5 },
    { name: 'pollo', img: 'img.jpg', id: 6 },
    { name: 'pollo', img: 'img.jpg', id: 7 },
    { name: 'pollo', img: 'img.jpg', id: 8 },
  ]
 
  var num = 0;
    
    return (
        <div>
        {
          arr.map(items => {
                if(num === num * 4){
                  return (
                    <div>
                      <h3> Producto </h3>
                        <p>{items.name}</p>
                        <p>{items.img}</p>
                        <p>{items.id}</p>
                      <br/>
                      {num + 1}
                     </div>
                    )
                }else{
                  return (
                    <div>
                      <p>{items.legth}</p>
                      <p>{items.img}</p>
                      <p>{items.id}</p>
                        <br/>
                      {num + 1}
                    </div>
                  )
                }
              }
            )
          }
      </div>
      )
  }
}


ReactDOM.render(
  <FriendsContainer />,
  document.getElementById('app')
);

Creo que las condiciones están bien implementadas, pero el problema nace ne como poder guardar el número de la variable "num". Si hay una manera de guardar el nuevo valor de la misma, creo que el código no presentara más problemas y podrá mostrar el "h2" y luego cuatro "items".

¿Quizás con un for funciona?

class productos extends React.Component {
  render() {
  const arr = [
    { name: 'pollo', img: 'img.jpg', id: 1 },
    { name: 'pollo', img: 'img.jpg', id: 2 },
    { name: 'pollo', img: 'img.jpg', id: 3 },
    { name: 'pollo', img: 'img.jpg', id: 4 },
    { name: 'pollo', img: 'img.jpg', id: 5 },
    { name: 'pollo', img: 'img.jpg', id: 6 },
    { name: 'pollo', img: 'img.jpg', id: 7 },
    { name: 'pollo', img: 'img.jpg', id: 8 },
  ]
 
  var num = 0;
    
    return (
        <div>
          {
          for(var i = 0; i < arr.leght; i++)
            {
              if(i === i * 4) {
                <div>
                  <h3> Producto </h3>
                  <p>{items.name}</p>
                  <p>{items.img}</p>
                  <p>{items.id}</p>
                  <br/>
                </div>
              } else {
                return(
                  <div>
                    <p>{items.name}</p>
                    <p>{items.img}</p>
                    <p>{items.id}</p>
                    <br/>
                  </div>
                )
              }
            }
        }
        </div>
      )
  }
}


ReactDOM.render(
  <FriendsContainer />,
  document.getElementById('app')
);

Lo intente, pero me sale el error de unexpected tokens en la línea del "for", un clásico. Creo que en React es diferente la forma de implementarlo y creo que con un for será la forma correcta de resolver el algoritmo.

Resumiendo, necesito que el algoritmo cada 4 "items" renderice el respectivo "h2" para poder hacer una separación por cada 4 "items". Cualquier tipo de solución es bienvenida, en React por favor. De antemano, ¡¡muchas Gracias!!

2
  • El primer ejemplo funciona tal y como describes la situación, ¿Pero tu quieres resolverlo con un for como en el segundo ejemplo?
    – g.4
    Commented el 7 sept. 2021 a las 18:24
  • 1
    El primer ejemplo funciona, pero no con los resultados esperados, hace un momento se me ocurrió cambiar la variable por un state, pero no me llego al resultado esperado que es cada 4 "items" aparezca el "h2", el primero funciona, pero no cumple la condición, el for directamente no funciona.
    – SrTager555
    Commented el 7 sept. 2021 a las 19:18

1 respuesta 1

2

El algoritmo tiene una secuencia definida de cada 4 items, una forma de resolverlo es buscando los números múltiplos de 4 en la iteración del array:

Para saber si un número es múltiplo de otro, se debe hacer la división y comprobar que el cociente es un número natural y el resto de la división es cero.

Ahora, se puede saber el resto de una división con el operador reminder de Javascript:

JS: divisor % Dividendo = resto

Además, se puede saber el índice del elemento de un array dentro de una operación map, solo hay que incluirlo en los argumentos del callback:

array.map((item,index)=>console.log(index));

Entonces, siendo index el divisor y 4 el Dividendo, la operación del algoritmo es:

index % 4 = 0

Demo JSX:

class App extends React.Component {
  render() {
    const arr = [
      { name: 'pollo 1', img: 'img.jpg', id: 1 },
      { name: 'pollo 2', img: 'img.jpg', id: 2 },
      { name: 'pollo 3', img: 'img.jpg', id: 3 },
      { name: 'pollo 4', img: 'img.jpg', id: 4 },
      { name: 'pollo 5', img: 'img.jpg', id: 5 },
      { name: 'pollo 6', img: 'img.jpg', id: 6 },
      { name: 'pollo 7', img: 'img.jpg', id: 7 },
      { name: 'pollo 8', img: 'img.jpg', id: 8 },
      { name: 'pollo 9', img: 'img.jpg', id: 9 },
      { name: 'pollo 10', img: 'img.jpg', id: 10 },
      { name: 'pollo 11', img: 'img.jpg', id: 11 },
      { name: 'pollo 12', img: 'img.jpg', id: 12 },
    ];
    
  return (
      <div>
      {
        arr.map((items, index) => {
              if(index % 4 === 0){
                return (
                  <div key={items.id}>
                    <h3> Producto </h3>
                      <p>{items.name}</p>
                      <p>{items.img}</p>
                      <p>{items.id}</p>
                    <br/>
                  </div>
                  )
              }else{
                return (
                  <div key={items.id}>
                    <p>{items.name}</p>
                    <p>{items.img}</p>
                    <p>{items.id}</p>
                      <br/>
                  </div>
                )
              }
            }
          )
        }
    </div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

 

Espero que esta respuesta sea de ayuda.


Enlaces relacionados:

Múltiplos de un número 1

Múltiplos de un número 2

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.