My goal is to set a dynamic z-index for my components based on the state variables. Currently, it only works when the zindex is set to 0.
Here is an example of my array:
images:[
['img1',false,[1,2,3],1,0],//4th one is zindex
['img2',false,[2,3,1],2,0],
['img3',false,[4,5],3,10],
['img4',false,[1,2,3],4,0],
['img5',false,[2,3,1],5,0],
['img6',false,[5],6,0],
['img7',false,[1,2,3],7,0],
['img8',false,[2,3,1],8,0],
['img9',false,[5],9,0],
['img10',false,[1,2,3],10,0],
['img11',false,[2],11,10],
['img12',false,[5],12,10]
],
This is a snippet of JSX code:
{this.state.images.map((im,index) =>
<div className="img-block" style={{'z-index':im[4]}} draggable="true" onDragStart={this.drag.bind(this,im[3],index)} onDrop={this.drop.bind(this,im[3],index)} onDragOver={this.allowDrop}>
)}
When rendered in HTML, the output looks like this:
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true"> //not rendered 10
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" > //not rendered 10
<div class="img-block" draggable="true" > //not rendered 10
If you have any insights on what I might have missed here, please let me know.