CODEWITHSUNDEEP
cssreactjs
fizzfuzzHK
fizzfuzzHK

Reputation: 13

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

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>;

Upvotes: 1

Views: 122

Answers (1)

hakisan_ks
hakisan_ks

Reputation: 46

Just need to add a simple condition:

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

Upvotes: 1

Related Questions