How To Loop Over Images Array And Render Them In A Component For React?

I have a list of 5 images in my react app which I would like to cycle through in an infinite loop. I basically want to animate these 5 frames so that a light bar looks like a light

Solution 1:

I will have gone with CSS animation. Here is the solution in React:

 state = {
    bars:[bar1,bar2,bar3,bar4,bar5],
    activeImageIndex: 0
 };

 componentDidMount(){
   setInterval(()=>{
     let newActiveIndex = this.state.activeImageIndex===4 ? 0 : this.state.activeImageIndex+1this.setState({
        activeImageIndex: newActiveIndex
     })
   }, 1000);


 }

 <Image src={this.state.bars[activeImageIndex]} />

Solution 2:

A simpler way might be to do this with CSS:

.lightbox {
  border: solid 3px black;
  display: inline-flex;
  padding: 10px20px;
  justify-content: space-between;
  width: 200px;
  position: relative;
  margin-left: 24px;
  align-items: center;
}

.light {
  border: solid 3px black;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  animation: blink 5s linear infinite;
}

.light:nth-child(2) {
  animation-delay: 1s
}

.light:nth-child(3) {
  animation-delay: 2s
}

.light:nth-child(4) {
  animation-delay: 3s
}

.light:nth-child(5) {
  animation-delay: 4s
}

@keyframes blink {
  0% {
    background-color: orangered;
  }
  19% {
    background-color: orangered;
  }
  20% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}

.lightbox::before,
.lightbox::after {
  content: "";
  border: solid 1.5px black;
  width: 20px;
  height: 0;
  position: absolute;
}

.lightbox::before {
  left: -24px;
}

.lightbox::after {
  right: -24px;
}

<divclass="lightbox"><divclass="light"></div><divclass="light"></div><divclass="light"></div><divclass="light"></div><divclass="light"></div></div>