Tengo esta instrucción Object.map en un componente de reacción.
{ instagramItems.map((item, index) => ( <div className="row" Key={index}> <div onClick={() => handleClick(item, index)} className="image-block col-sm-4" style={{ backgroundImage: "url(" + item.media_url + ")", backgroundPosition: 'center ', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}></div>Quiero cambiar la clase col-sm-X en un div para que la salida repita este patrón.
col-sm-4 col-sm-8 col-sm-4 col-sm-4 col-sm-4 col-sm-8 col-sm-4Supongo que necesito usar el índice para calcular lo que necesito para configurar la clase.
Actualizar:
Aunque he marcado la respuesta de Yuji 'Tomita' Tomita como la correcta. no es exactamente lo que queria...
Quiero que el patrón se repita, no solo tener diferentes clases para la primera y la última. Quiero que la salida sea así:
http://www.prepbootstrap.com/bootstrap-template/responsive-image-tiles
¿Alguien puede mejorar la respuesta?
Sí. Si tiene una lógica detrás, es decir, "el elemento 2 y el penúltimo" son 8, entonces puede codificarlo.
`col-sm-${index === 1 || index === myArray.length-2 ? 8: 4}`O bien, podría tener una matriz separada de clases si no siguen ningún patrón y extraen el índice de bucle.
const cols = [4, 8, 4, 4, 4, 8] const myArray.map((x, i) => <div className={cols[i]}></div>)La forma en que lo haces es más una especie de experiencia de desarrollador. ¿Qué patrón es más fácil de entender/mantener/etc.
Solo para mayor claridad después de la respuesta de @Yuji 'Tomita' Tomita
El código fuente que funciona se ve así:
{instagramItems.map((item, index) => ( <div Key={index} onClick={() => handleClick(item, index)} className={"image-block col-sm-" + (index === 1 || index === instagramItems.length - 2 ? 8 : 4) } style={{ backgroundImage: "url(" + item.media_url + ")", backgroundPosition: 'center ', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}></div> ))}