Looking for a way to dynamically change the color of an array in React + styled jsx?
Let's say you want to change the color when the number of elements in the array is a multiple of 4 (e.g. the index is 4, 8, etc.)
Is there a clever solution to achieve this?
<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>;