Inline CSS looks different when looping through - css

Question

I have a solution which have boxes. If the user wants three boxes it will look like this:
The user can also choose 2 different colors for _each_box. If the user choose one color for one box, the box background color will be changed to that color. If the user enter two colors instead, a linear gradient will be set. These data will be sent as a variable via props:
firstColorBox1
secondColorBox1
firstColorBox2
secondColorBox2
and so on. These can have values such as "red" or hex-codes. I also have another props "nrofboxes" which is the number of boxes. I use this variable for my for loops.
To dynamically change the css of the boxes, I am using inline CSS which is manipulated via props. In short, I have a state with an empty array. Each box inline style properties will be saved in this array and extracted via its index in a for-loop. Too handle each box specific css style I have done like this:
I have an empy array in state where each individual style object till be added to:
boxStyle: []
in componentDidMount
for (var i = 1; i <= Number(this.props.nrofboxes); i++){
let style = {backgroundColor:"", };
let concatToState;
if(this.props["firstColorBox" + i] || this.props["secondColorBox" + i] ) {
if(this.props["firstColorBox" + i] && this.props["secondColorBox" + i] ){
style["backgroundImage"] = `linear-gradient(${this.props["firstColorBox" + i]}, ${this.props["secondColorBox" + i]})`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
}
else if(this.props["firstColorBox" + i]) {
style.backgroundColor = `${this.props["firstColorBox" + i]}`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
} }}
Above I have a loop for each box, and I check if it has value in both props and if so --> add linear gradient, and if not --> add background color. Notice how I go through each box dynamically via:
this.props["firstColorBox" + i]
I then add the value of the color/props to an object, and concat it to state:
style.backgroundColor = `${this.props["firstColorBox" + i]}`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
The idea is to take the index of the specific box style in the state array in a for loop in render.
In render, I output all boxes via a for loop:
for (var i = 1; i <= Number(nrofboxes); i++){
boxes.push(
<div className={globalStyles["a-Grid-col"] + " " + globalStyles["w-sm12"] + " " + globalStyles["w-lg" + size] + " " + globalStyles["w-xl" + size] + " " + styles["w-link-box-container"]}>
<div className={styles["link-box"]} >
<a href={this.props["linkurl" + i]} style={this.state.boxStyle[i]} >
<h4 className={styles["link-box-header-container"]}>
<small className={styles["link-box-header-title"] + " " + (this.props.themefontcolor ? styles["w-themed-color"] : "")}>{this.props["linktitle" + i]}</small>
<span className={styles["link-box-header-text"] + " " + (this.props.themefontcolor ? styles["w-themed-color"] : "")}>{this.props["linktext" + i]}</span>
</h4>
</a>
</div>
</div>
);
}
As you can see above, I try to get each specific style object from the state via the for loop like this:
style={this.state.boxStyle[i]}
However, it does not work. If the firstColorBox1 is = "red", the expected behaviour would be that only the first box will be red but it looks like this:
2 problems: instead of a red background color, the border is red. And not only that, all three boxes are affected by it instead of only the first one.
And if I hardcode the inline style to be red like this:
style={{backgroundColor:"red"}}
it will look like this:
It should be equal, but there is no red border and the backgroundColor is set properly. Why is that? I guess something with my loops is wrong.