ReactJS通过轮播中的图像遍历对象

Question

I have an modal with an carousel inside it, I allready fixed that it will show the clicked image in the modal with setState with this function:

onClick={this.toggle.bind(this, i)} 

toggle(id) {
    this.setState({
      clickedImage: id,
      modal: !this.state.modal,
    });
  }

And here the code where I show the image:

<div className="carousel-inner" role="listbox">
  <div className="carousel-item active">
    {(this.state.clickedImage !== undefined && this.state.clickedImage !== null) ?
       <img className="img-fluid" src={block.gallery[this.state.clickedImage].images.thumbnail_lg} />
     : null
     }
 </div>
 <a className="left carousel-control" href="#demoCarousel" role="button" data-slide="prev">
   <span className="icon-prev" aria-hidden="true" />
   <span className="sr-only">Previous</span>
 </a>
 <a className="right carousel-control" href="#demoCarousel" role="button" data-slide="next">
   <span className="icon-next" aria-hidden="true" />
   <span className="sr-only">Next</span>
 </a>
</div>

But how can I loop through all the images so that the next image is shown on data-slide="next" & data-slide="prev"

I thought about looping through the object like this:

{ block.gallery.map((item, i) => (
  <div className="carousel-item">
    <img src={item.images.thumbnail_lg} />
  </div>
))}

And than only set active to clicked image but how do I do that in a proper way?

Answer 1

Here is the answer found by myself:

{ block.gallery.map((item, i) => (
   (this.state.clickedImage !== undefined && this.state.clickedImage !== null) ?
    <div key={i} className={(this.state.clickedImage === i) ? 'carousel-item active' : 'carousel-item'}>
         <img className="img-fluid" src={item.images.thumbnail_lg} />
    </div>
    : null
    ))}