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

Question

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?

Yuji 'Tomita' Tomita · Accepted Answer · 2022-06-13 23:19:08Z

2

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

edited Jun 13, 2022 at 23:19

answered Jun 13, 2022 at 23:17

Yuji 'Tomita' Tomita

119k32 gold badges287 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yuji 'Tomita' Tomita Over a year ago

@pilchard classic

Ayo Adesina Over a year ago

I am trying className="image-block col-sm-${index === 1 || index === myArray.length-2 ? 8: 4}" but How do I escape the string?

Yuji 'Tomita' Tomita Over a year ago

@AyoAdesina use {} to use javascript. Inside {} is pure javascript. className={"foo" + 4}

Yuji 'Tomita' Tomita Over a year ago

Oh, you're using template escaping in which case you need to use a template literal, className={....}

Ayo Adesina Over a year ago

@Yuji'Tomita'Tomita like this: className={"image-block col-sm-" + index === 1 || index === item.length - 2 ? 8 : 4} Not working... can you be more specfic?

|

Ayo Adesina · Accepted Answer · 2022-06-14 00:10:38Z

0

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

edited Jun 14, 2022 at 0:10

answered Jun 13, 2022 at 23:48

Ayo Adesina

2,4654 gold badges48 silver badges83 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related