I have this Object.map statement in a react component.
{
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>
I want to change the col-sm-X class on a div so the out put repeats this pattern.
col-sm-4
col-sm-8
col-sm-4
col-sm-4
col-sm-4
col-sm-8
col-sm-4
I'm guessing I need to use the Index to calculate what I need to set the class to.
Update:
Though I have marked Yuji 'Tomita' Tomita answer as the correct one. It is not exactly what I wanted...
I want the pattern to repeat not just have diffrent classes for the first and the last. I want the out put to be like this:
http://www.prepbootstrap.com/bootstrap-template/responsive-image-tiles
Can anyone improve the answer?
Yep. If it has logic behind it, i.e. "item 2, and second from last" are 8, then you can code that in.
`col-sm-${index === 1 || index === myArray.length-2 ? 8: 4}`
Or, you could have a separate array of classes if they follow no pattern and pull the loop index.
const cols = [4, 8, 4, 4, 4, 8]
const myArray.map((x, i) => <div className={cols[i]}></div>)
How you go about it is more of a developer experience kind of thing. What pattern is easiest to understand/maintain/etc
Just for clarity after the answer from @Yuji 'Tomita' Tomita
The source code that works looks like this:
{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>
))}