How to change style of specific element in Array().fill().map of React

Question

I have below code in React + styled jsx.

I want to change the color of an array when the number of elements in it is a multiple of 4. （For example, when the key is 4 and 8 and..etc)

Is there any smart way to achieve it?

<div>
  <div className="app">
    <div className="seq">
      {new Array(32).fill().map((v, i) => (
        <div className="box" key={i} onClick={() => handleClick(i)}></div>
      ))}
    </div>
  </div>
</div>;

<style jsx>{`
  .app {
    background-color: rgb(37, 37, 37);
    min-height: 100vh;
    width: vw;
    display: flex;
    flex-flow: column;
  }
  .box {
    width: 30px;
    height: 30px;
    background-color: rgb(25, 255, 217);
    border-color: rgb(37, 37, 37);
    border-width: 2px;
    border-style: solid;
    border-radius: 15%;
  }
`}</style>;

hakisan_ks · Accepted Answer · 2021-06-02 10:59:44Z

1

Just need to add a simple condition:

className={ i > 0 && i % 4 === 0 ? 'box-with-diff-color' : 'box'}

edited Jun 2, 2021 at 10:59

answered Jun 2, 2021 at 10:53

hakisan_ks

461 gold badge2 silver badges5 bronze badges

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

2 Comments

Shyam Over a year ago

This will return true when your i is 0 and 1 .

hakisan_ks Over a year ago

Thanks, you're right. It return true with 0. I'll edit the answer

Collectives™ on Stack Overflow

How to change style of specific element in Array().fill().map of React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related