Reactjs перебирать объект с изображениями в каруселью

Question

У меня есть модальный с каруселью внутри него, я Allready зафиксировано, что он будет показывать щелкнули изображение в модальном с setState с этой функцией:

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

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

и здесь код, где я показываю изображение:

<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> 

Но как я могу перебрать все изображения, так что следующее изображение отображается на data-slide="next" & data-slide="prev"

Я думал о перекручивание через объект, как это:

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

И чем только набор активных для щелкнул изображение, но как я могу сделать это надлежащим образом?

Answer 1

Вот ответ нашел сам:

{ 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 
    ))}