Dynamically change class based on current index in a react component. (object.map)-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>
                    ))}