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!!
for
como en el segundo ejemplo?